How can I change order of content while responding?

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.

float-start, float-end, order-first... Can you make a fiddle or snippet please. — bZezzz, Oct 20 '21 at 20:20
@bZezzz Yes here is a fiddle, note that I reset the columns to not have all the classes from different things I tried. https://jsfiddle.net/uroabnxz/ — Richard, Oct 20 '21 at 20:28
Work in progress https://jsfiddle.net/bZezzz/osy1rxLf/35/ , it's pretty sure possible. Will be useful in the future, we will find a solution. Stay tuned — bZezzz, Oct 20 '21 at 21:17
I don't suppose I could edit the title to be based around how Bootstrap 5 breaks code that works in Bootstrap 4? Would be interested in attracting those who understand both version, and not just CSS purists. — Richard, Oct 21 '21 at 19:49
Still haven't found a solution. I tried UpWork and the closest someone could get, it used Absolute Positioning. I'd like to not accept that as a solution just yet. — Richard, Nov 08 '21 at 20:58

score 3 · Accepted Answer · answered Nov 09 '21 at 16:04

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>

Cutey from Cute Code · Answer 2 · 2021-10-21T03:21:20.613

0

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/

edited Oct 21 '21 at 03:21

answered Oct 21 '21 at 01:13

Cutey from Cute Code

1,065
3
13

1

Thank you. I took a look at the Docs last night after you commented on @bzezzz's answer. While the responsive display is shown in the Docs, I don't see anything about a layout like this https://i.stack.imgur.com/4UIIj.png. I don't think anything in that section of the Docs shows an example where two divs are stacked on top of each other and vertically span a single Div to either side. I'm ready to be shown otherwise though, as that would mean a solution :) – Richard Oct 21 '21 at 13:05
Bountied to make that usefull question answered. hope it will help. – bZezzz Nov 08 '21 at 21:31

How can I change order of content while responding?

2 Answers2