How can I change order of content while responding?

user_10788089 0
Viewed 100

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.

bootstrap-5 twitter-bootstrap css
2 Answers

enter image description here

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>

user_155451160

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/

user_171534650
Related