There have been numerous instances where this question has been raised and addressed, such as here, here, and here. However, those discussions pertained to Bootstrap 4, which is approaching its End of Life as of today, 2021-10-20. Given that Bootstrap 5 is presently the only actively supported version without a specified Critical Support end date, it seems prudent to seek a solution tailored to this edition. Therefore, I am posing the question again, but this time updating it for Bootstrap 5. Unfortunately, my low reputation prevents me from commenting on existing answers, which led me to believe that initiating a new question may be more appropriate.
The objective is to achieve the following content layout:
The two layouts For my default/mobile display on the left, I wish to have sections 1, 2, and 3. On larger devices, the intention is to position section 2 on the left, while sections 1 and 3 appear on the right.
I experimented with the following code snippet from the first referenced question:
<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>
While this approach proved effective for Bootstrap 4, it encountered issues with Bootstrap 5: first-solution
I also attempted solutions from the second referenced question:
However, modifying them for Bootstrap 5.0.2 or higher (tried various versions) resulted in section #2 not floating properly to the left visually. There is a similar solution in the second linked question, but it fails to function correctly on either version of Bootstrap: question 2, answer 3-ish as it causes the first section to match the height of the second, leaving the third section isolated.
Therefore, I am seeking input on a Bootstrap 5-compatible solution. Any adjustments to the classes that can ensure proper display? I have prepared a fiddle with Bootstrap 5 and the 3 sections ready for testing: https://jsfiddle.net/uroabnxz/
Alternatively, is it possible that this approach is ill-advised, and Bootstrap deliberately altered this functionality? If dissuaded from pursuing this route, I could resort to duplicating the HTML and toggling its visibility based on viewport/breakpoints. Though not ideal, I am open to this workaround if it garners consensus as a feasible solution.