I want to make the following layout:

enter image description here

However, since block 3 is quite high, and block 1 is rather narrow, the following view is obtained with a “hole” between block 1 and 2:

enter image description here

How can you get rid of the "hole" so that 1, 2 and 4 go in one column without breaks?

My workpiece, on which I tested:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="col-sm col-md-8"> <p class="bg-success">a1</p> </div> <div class="col-sm col-md-4"> <p class="bg-primary">b1<br><br><br><br><br><br></p> </div> <div class="col-sm col-md-8"> <p class="bg-danger">c1</p> <p class="bg-warning">c2</p> </div> </div> </div>

    1 answer 1

    This is done very simply with the help of flex-elements, add the following code to your css

      .col-md-8{ display:flex; flex-direction:column; } .col-md-8 p{ flex:1; }