I'm attempting to achieve a specific layout using Bootstrap order classes:
https://i.sstatic.net/NKhg9.png Currently, I have something similar to this setup (assuming all elements are of equal height):
<div class="row">
<div class="col-3 order-lg-1 order-md-8">First element</div>
<div class="col-6 order-6">Second element</div>
<div class="col-3 order-lg-1 order-md-7">Last element</div>
</div>
On larger displays, the elements should be in a row as above. On smaller screens, I want the first and last elements to merge into a single column.
This layout can be achieved by combining the first and last elements into one:
<div class="row justify-content-around">
<div class="col-6">Second element</div>
<div class="col-3">
<div>Last element</div>
<div>First element</div>
</div>
</div>
However, this approach will not work for larger displays as intended.
Another possibility is duplicating the first element and toggling its visibility based on breakpoints like so:
<div class="row justify-content-around">
<div class="col-3 d-none d-lg-block">First element</div>
<div class="col-6">Second element</div>
<div class="col-3">
<div>Last element</div>
<div class="d-block d-lg-none">First element</div>
</div>
</div>
But this solution feels somewhat hacky. Is there a purely CSS-based method to achieve this desired effect?