<body> <div class="row"> <div class="col-lg-6 black"></div> <div class="col-lg-6 red"></div> </div> <div class="row"> <div class="col-lg-6 black"></div> </div> It turns out the following => 
How to raise the last black block, what would have turned out a kind of square divided by color in half? The left side is black, the second is red. Thank. 
It is possible so:
<div class="rows" style="display: flex;"> <div class="row"> <div class="col-lg-6 black"></div> <div class="col-lg-6 red"></div> </div> <div class="row"> <div class="col-lg-6 black"></div> </div> </div> And with .row already play flexbox properties
.black{ height: 200px; background: black; } .red{ height: 400px; background: red; } <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="row"> <div class="black"></div> </div> <div class="row"> <div class="black"></div> </div> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6"> <div class="row"> <div class="red"></div> </div> </div> 
Change the nesting principle, for example:
<div class="row"> <div class="col-lg-6 "> <div class="col-lg-12 black"></div> <div class="col-lg-12 black"></div> </div> <div class="col-lg-6 red"></div> </div> 
Source: https://ru.stackoverflow.com/questions/595532/
All Articles