How can I change order of content while responding? - css

Question

This question has been asked AND answered multiple times such as here, here, and here,
but those were all for Bootstrap 4 - which is 11 months away from End of Life as of today, 2021-10-20.
With Bootstrap 5 being the only version of bootstrap both actively supported and without a stated Critical Support end date, I think it is worth finding a solution that works. Hence, I will ask the question again but updated for Bootstrap 5. I did try to comment on the existing answers, but my reputation is too low to comment. Perhaps that wasn't the right place, and was a sign that I should post a new question.
My goal is to have the following content layout.
The two layouts
On the left, my default/mobile layout has sections 1, 2, and 3.
But on bigger devices, I want section 2 on the left, and for sections 1 and 3 to be on the right.
I tried this, from linked question #1:
<div class="row d-sm-block">
<div class="col-sm-9 order-2 order-md-0 float-left">2</div>
<div class="col-sm-3 order-3 order-md-0 float-right">3</div>
<div class="col-sm-3 order-1 order-md-0 float-right">1</div>
<div class="col-sm-3 order-4 order-md-0 float-right">4</div>
</div>
On Bootstrap 4, it worked, but Bootstrap 5 it didn't:
first-solution
I tried these, from linked question #2:
https://www.codeply.com/go/8lsFAU3C5E
https://www.codeply.com/go/mKykCsBFDX
But change them to Bootstrap 5.0.2 or higher (I tried a few) and it will not float (visually) #2 to the left.
There is another answer on linked question #2 that looks close, but on either bootstrap it isn't correct:
question 2, answer 3-ish
because it will make the first section as tall as the second section, forcing the third to always be alone.
So I am wondering if anyone has a solution for Bootstrap 5. Anything I can do to change these classes to make it display correctly?
Here is a fiddle with Bootstrap 5 ready to go, with my 3 sections: https://jsfiddle.net/uroabnxz/
Alternatively, perhaps this is a bad idea and maybe there is a reason Bootstrap broke this - intentionally? If someone advises against this, I could always duplicate the HTML, and display/hide it based on viewport/breakpoints. I didn't want to do that as it feels dirty, but if most people think it is an okay solution, I can do that.

Answer 1

To get the same result as a picture above you need to use display: block and floats instead display: flex. And also in Bootstrap v5 the floats were renamed.
Renamed .float-left and .float-right to .float-start and .float-end. migration to v5
<div class="d-block">
<div class="col-12 col-sm-6 bg-primary float-end">1</div>
<div class="col-12 col-sm-6 bg-secondary float-start">2<br />is<br />taller</div>
<div class="col-12 col-sm-6 bg-info float-end">3</div>
</div>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<h1>Hello, world!</h1>
<div class="container">
<div class="d-block">
<div class="col-12 col-sm-6 bg-primary float-end">1</div>
<div class="col-12 col-sm-6 bg-secondary float-start">
2<br />is<br />taller
</div>
<div class="col-12 col-sm-6 bg-info float-end">3</div>
</div>
</div>

Answer 2

Bootstrap 5 seems very natural to settle into in my experience so far, go for it! I find it less different than swapping from v3 to v4. Ordering according to a responsive display is fully addressed, here are the Docs, scroll down to Reordering (Order Classes)....
https://getbootstrap.com/docs/5.0/layout/columns/