can i have a multi-height bootstrap grid layout? [duplicate] - css

Question

This question already has answers here:
Make a div span two rows in a grid
(2 answers)
Closed 2 years ago.
I have a layout I am trying to achieve.
Col 1 | Col 2 | Col 3
Col 2 is "col-md-6 col-lg-6" and Col 1 and Col 3 are "col-md-3 col-lg-3" respectively
I want something like this:
However I end up with everything on one side like this:
And if I try and use pull or push classes I end up with unwanted spaces:
Here is some sample code that is close to what I have:
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
content1
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
content2
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
content3
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
content4
</div>
<div class="col-xs-12 col-sm-12 col-md-3 col-lg-3">
content5
</div>
</div>
Thanks in advance!

Answer 1

Try this way to get the first image like result
<div class="container">
<div class="row">
<div class="col-3">
<div class="bg-danger">1</div>
<br />
<div class="bg-danger">2</div>
</div>
<div class="col-6">
<div class="bg-danger">3</div>
</div>
<div class="col-3">
<div class="bg-danger">4</div>
<br />
<div class="bg-danger">5</div>
</div>
</div>
Or another way to put columns inside a column
<div class="row">
<div class="col-3">
<div class="row">
<div class="col-12">
<div class="bg-danger">1</div>
</div>
<div class="col-12">
<div class="bg-danger">1</div>
</div>
</div>
</div>
<div class="col-6">
<div class="bg-danger">3</div>
</div>
<div class="col-3">
<div class="row">
<div class="col-12">
<div class="bg-danger">1</div>
</div>
<div class="col-12">
<div class="bg-danger">1</div>
</div>
</div>
</div>
</div>
</div>
and to control height you can use
That will make all elements with the same height.
and don't put it if you want the height to be as the content of each column.
.row {
display: flex;
align-items: stretch;
}