How to Order Columns Effectively in Bootstrap 4 and 5?

Ordering Columns with Bootstrap 4

In Bootstrap 4, column ordering can be achieved using a combination of classes and flexbox. To obtain the desired 1-3-2 layout on mobile screens, we'll explore the following techniques:

2021 - Bootstrap 5

Bootstrap 5 introduced new classes for responsive ordering: order-first, order-last, and order-0 to order-5. This simplifies column ordering, allowing you to set the desired order for each viewport size.

2018 - Bootstrap 4

Pre-4.0 Beta:

Before Bootstrap 4.0 beta, push and pull classes had the format push-{viewport}-{units} and pull-{viewport}-{units} without the xs- infix. To achieve a 1-3-2 layout on mobile, we would use classes like this:

<div class="col-3 col-md-6"></div>
<div class="col-6 col-md-12 push-xs-6 pull-xs-3"></div>
<div class="col-3 col-md-6 pull-xs-6"></div>

Bootstrap 4.1 and Later

Bootstrap 4.1 introduced flexbox, providing a more intuitive way to order columns. Responsive ordering classes range from order-1 to order-12. By setting these classes, we can specify the order of columns relative to their parent .row:

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

Changing Order Using Flexbox Direction

In addition to ordering classes, Bootstrap 4.1 also allows for reversing column order using flexbox direction utilities:

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

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