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

The

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>

Show code snippet

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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/