Не получается выровнять левую часть по вертикали

Question

HTML:

<body>
    <div class="container-fluid" >
        <div class="row" id="wrapper">
            <div class="col-xl-10 col-lg-9 col-md-9 order-second order-md-first" id="box">
                <div class="row" id="row1">
                    <div class="col-lg-12" id="box1">Box 1 Lorem, ipsum dolor sit amet consectetur adipisicing elit. Animi saepe cupiditate provident cumque perspiciatis iste impedit dolorum! Similique, minus perspiciatis? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident, quis! Sint magnam fugit veniam dolore blanditiis explicabo, reiciendis dignissimos excepturi animi quia atque illum mollitia, amet quis ea quas sed culpa facere numquam? Velit accusamus accusantium, corporis molestiae non maiores dolorum iure magnam numquam corrupti voluptas, illo inventore fugiat dolore. ipsum dolor sit amet consectetur adipisicing elit. Eligendi ducimus nihil ratione pariatur rerum! Ea ipsum itaque eaque officia quod esse similique quisquam eligendi atque reprehenderit rem, id eos unde mollitia quasi! Accusamus at laborum blanditiis molestias ipsam reprehenderit, cum doloremque corrupti minima dolore, accusantium quod facere nostrum vitae. Fugiat.</div>
                </div>
                <div class="row" id="row2">
                    <div class="col-lg-6 col-md-6 col-sm-5 order-md-first order-sm-first order-second" id="box3">Box 3 Lorem ipsum dolor sit amet.Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure, voluptatibus!</div>
                    <div class="col-lg-4 col-md-4 col-sm-5 order-first col-6" id="box2">Box 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, fugit.</div>                   
                    <div class="col-lg-2 col-md-2 col-sm-2 order-first col-6" id="box7"><input type="button" id="b1" value="Зробити добре" onclick="hi()"></p></div>
                </div>
                <div class="row" id="row3" >
                    <div class="col-lg-4 col-md-4 col-sm-5 " id="box4">Box 4 Lorem ipsum dolor sit amet consectetur adipisicing elit. Eos, fugit.</div>
                    <div class="col-lg-8 col-md-8 col-sm-7 " id="box5">Box 5 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vitae maxime sed consequuntur sit libero ab voluptatibus quis velit officiis amet corporis quia enim quibusdam a, numquam natus iure laudantium voluptatum minus dolor quidem eos? Maiores nihil rem exercitationem necessitatibus eveniet.</div>
                </div>
            </div>
            <div class="col-xl-2 col-lg-3 col-md-3 order-first order-md-second" id="box6">Box 6 (MENU!?)  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, aliquid!Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio eveniet delectus soluta illo modi ad quia fugiat quaerat debitis, nam sed. Tempore, eaque nemo. Eos ea cumque quia quidem amet illum necessitatibus a nobis eaque, similique, sunt saepe aspernatur!</div>
        </div> 
    </div>  
</body>

CSS:

#b1{
    background: red;
    max-width: 95%;
    white-space: normal;
}
#row1{
    border: 0.1em solid black;
    background-color: rgba(193, 202, 211, 0.438);
}
#row2{
    border: 0.1em solid black;
    border-top: 0em;
    background-color: rgba(193, 202, 211, 0.438);
}
#row3{
    border: 0.1em solid black;
    background-color: rgba(193, 202, 211, 0.438);
    border-top: 0em;
}
#box1{
    padding: 0.5em;
}
#box6{
    padding: 0.5em;
    border: 0.1em solid black;
    border-left: 0em;
    background-color: rgba(193, 202, 211, 0.438);
}
#box3{
    padding: 0.5em;
    border-right:0.1em solid black;
}
#box2{
    padding: 0.5em;
    border-right:0.1em solid black;
}
#box7{
    padding: 0.5em;
}
#box4{
    padding: 0.5em;
    border-right:0.1em solid black;
}
#box5{
    padding: 0.5em;
}
@media(max-device-width:575px){
    #row2{
        border: none;
    }
    #row3{
        border: none;
    }
    #box1{
        border-bottom:0.1em solid black ;
    } 
    #box2{
        border:0.1em solid black;
        border-top: none;
        border-left: none;
    }
    #box3{
        border-right: none;
    }
    #box4{
        border-right: none; 
    }
    #box7{
        border-bottom:0.1em solid black  ;
    }
    #box5{
        border-top:0.1em solid black ;  
    }
}
@media(max-device-width:767px){
    #row1{
        border: 0em;  
    }
    #row2{
        border: 0.1em solid black;
        border-bottom: none;
    } 
    #row3{
        border: 0em;   
    }
    #box6{
        border: 0.1em solid black;
    }
    #box1{
        border: 0.1em solid black;
        border-top: none;
        border-bottom: none;
    }
    #row3{
        border: 0.1em solid black;   
    }
    #box4{
        border-bottom:0.1em solid black;
        border-bottom: none;
    }
}

БЛОГ НА HUSL

Не получается выровнять левую часть по вертикали

Ответы (0 шт):