Above a width of 576 px, I have two columns, with the right container 2 (blue) spanning the height of the two left containers.
Below a width of 576 px, I have a single column layout, with container 3 (orange) now occupying the second position.
My question: Is it possible to create this layout with Bootstrap’s own rows and columns? I know that it is very easy to adjust the order of the columns, but assigning a span to container 2 in the two-column layout has not worked for me.
I tried with Bootstrap Studio 5.8.1 and Bootstrap 5.0.
That and using flexbox to make the column on the right fill up the full height of the parent container.
The only difference is that in the W3 CSS grid example, the column widths are fully “fluid” based on screen width, whereas Bootstrap’s column widths are “hard” (based on the breakpoints,) but you can use CSS transitions to simulate that same fluid animation effect with Bootstrap.