How Can I Reorder Columns in Bootstrap 4 and 5?

Reorganizing Columns with Bootstrap 4

In Bootstrap 4, it's possible to reorder columns using various methods, depending on the desired effect and screen size.

For Bootstrap 5 (2021)

Starting with Bootstrap 5, the responsive ordering classes have been updated to include order-first, order-last, and order-0 to order-5. These classes allow for more flexibility in column arrangement.

For Bootstrap 4 (2018)

In Bootstrap 4, the responsive ordering classes include order-first, order-last, and order-0 to order-12. To achieve the desired 1-3-2 layout on mobile, the following classes should be used:

<div class="container">
  <div class="row">
    <div class="col-3 col-md-6">1</div>
    <div class="col-6 col-md-12 order-2 order-md-12">3</div>
    <div class="col-3 col-md-6 order-3">2</div>
  </div>
</div>

Customizing with Flexbox

Flexbox is natively supported in Bootstrap 4.1 and later. This provides even more control over column order using direction utilities:

<div class="container">
  <div class="row flex-column-reverse flex-md-row">
    <div class="col-md-8">2</div>
    <div class="col-md-4">1st on mobile</div>
  </div>
</div>

With these options, Bootstrap offers ample flexibility for reorganizing columns based on screen size and desired layout.

The above is the detailed content of How Can I Reorder Columns in Bootstrap 4 and 5?. For more information, please follow other related articles on the PHP Chinese website!