My website, using bootstrap, has a unique layout consisting of two columns side by side on desktop. In each column, the content is statically stacked with div elements of varying heights:
A | B
A | D
C | D
E | F
E
Currently, I have set up this layout by utilizing two col-6 classes and populating them with corresponding content divs.
However, when it comes to mobile view, the design only allows for stacking the columns vertically like so:
A
A
C
E
E
B
D
D
F
The issue arises from the fact that in the above illustration, the A div is more closely related to the B div rather than the C div. My goal is to find a way to rearrange the layout for mobile devices so that it looks like this:
A
A
B
C
D
D
E
E
F
In essence, I need the contents of the two columns to merge together for the mobile layout, alternating between the div elements they contain. While my instinct suggests achieving this without JavaScript or custom CSS would be challenging within bootstrap's col-6 structure, I am open to exploring alternative solutions. Perhaps restructuring the overall layout without relying on col-6 or experimenting with card-deck could provide a solution.
The current code snippet:
<div class="container">
<div class="row pl-sm-3 px-1">
<div class="col-md-6 pt-sm-4">
<div class="row pb-5 justify-content-center">
<h1 class="display-4 text-light">
{{ $.Page.Title }}
</h1>
</div>
<div class="text-center">
{{ range .Params.pictures }}
<img ... >
{{end}}
</div>
</div>
<div class="col-md-6 pl-3 pr-4">
<div class="mt-5 pt-5"></div>
<div class="card">
{{ range .Params.text}}
<div class="card-body">
...
</div>
{{end}}
</div>
</div>
</div>
</div>