How Can I Order Columns Responsively in Bootstrap 4?

Order Columns with Bootstrap 4

Reordering Columns for Responsive Layouts

Bootstrap 4 provides a simplified mechanism for ordering columns across different screen sizes. This article explores the various methods to achieve this.

Bootstrap 4.1

With the introduction of flexbox in Bootstrap 4.1, column ordering has become more straightforward. The order utility classes now allow you to specify the desired column order, ranging from order-1 to order-12. Responsive ordering can be achieved by combining these classes, such as order-md-12 order-2, which positions the column as the last on medium screens (XXL, XL, LG, MD) and second on extra small screens (XS).

Example:

<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>

Bootstrap 4

Before Bootstrap 4.1, column ordering relied on the push and pull classes. These classes were modified in Bootstrap 4 and follow the syntax: push-{viewport}-{units} and pull-{viewport}-{units}. To achieve the desired 1-3-2 layout on mobile/extra small screens, the following classes would be used:

Example:

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

Note: This method is deprecated in Bootstrap 4.1 .

Flexbox Direction Utilities

In addition to the order utilities, Bootstrap 4.1 also provides the flex-column-reverse and flex-md-row classes. These classes allow you to change the direction of the columns on different screen sizes. For instance, the following code arranges the columns vertically on mobile screens and horizontally on medium screens and larger:

Example:

<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>

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