Alternating bootstrap grid columns and mobile view - css

Question

I have this design:
Desktop or large screens.
Notes* Red or green boxes are not the same height.
Mobile or lower screens.
How to create this layout type on bootstrap 4 grid or custom CSS grid, what is better?
Thanks, have a nice day.

Answer 1

First of all, if you would like to build a masonry-like columns, a regular Bootstrap grid system won't give you what you want. Instead, you will have to use the card columns or JavaScript masonry plugins.
Layout with Card Columns
<div class="container">
<div id="example" class="card-columns">
<div id="card1" class="card border-success">
<div class="card-body">
<p class="card-text">Card #1 - height: 20rem;</p>
</div>
</div>
<div id="card2" class="card border-success">
<div class="card-body">
<p class="card-text">Card #2 - height: 12rem;</p>
</div>
</div>
<div id="card3" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #3 - height: 18rem;</p>
</div>
</div>
<div id="card4" class="card border-danger">
<div class="card-body">
<p class="card-text">Card #4 - height: 14rem;</p>
</div>
</div>
</div>
</div>
With little bit of styling to setup 1 column for mobile view and 2 for others:
#example.card-columns {
column-count: 1;
}
#media(min-width: 576px) {
#example.card-columns {
column-count: 2;
}
}
You can get something closed to what you would like to achieve:
demo: https://jsfiddle.net/davidliang2008/n3fhyp8c/60/
Problems on Mobile View
Now there is a problem on the mobile view. Since the order of the CSS columns is top to bottom, left to right, and there is no way to change it, the only way to get what you want on the mobile view is to duplicate contents and hide/show them based on the breakpoints...
Again, your second screenshot is missing a red box so I don't know which one you want to put in the middle. Here I am assuming you want to put both red boxes there:
<div id="card1" />
<div id="card2" class="card border-success d-none d-sm-block">
...
</div>
<div id="card3" />
<div id="card4" />
<div id="card2" class="card border-success d-block d-sm-none">
...
</div>
Then you can get something you want to achieve on mobile view:
demo: https://jsfiddle.net/davidliang2008/n3fhyp8c/63/