How Can I Reorder Columns in Bootstrap 4?

Order Columns through Bootstrap4

Reordering columns in Bootstrap4 can be achieved using various techniques, depending on the requirements and the version of Bootstrap being used.

Bootstrap 4.1 (Current Version)**

Bootstrap 4.1 introduced a new set of responsive ordering classes: order-first, order-last, and order-0 to order-12. These classes allow for more flexibility in controlling the order of columns on different screen sizes.

To order columns in the desired mobile view (1-3-2), use the following code:

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

Bootstrap 4 (Older Versions)**

In earlier versions of Bootstrap 4 (pre-4.1), push and pull classes were used to control column order. However, as of Bootstrap 4.0 beta, these classes have been deprecated and replaced with push-{viewport}-{units} and pull-{viewport}-{units}.

Pre-4.0 Beta

To achieve the desired layout (1-3-2) using the pre-4.0 beta syntax:

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

4.0 Beta and Later

For Bootstrap 4.0 beta and later versions, the following syntax should be used:

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

Other Approaches

Flexbox Direction

In Bootstrap 4.1 and later, it is also possible to use the flexbox direction utilities to change the order of columns. For example, the following code would reverse the order of columns on mobile screens:

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

Collapsible Columns

Another option for ordering columns is to use collapsible columns. This allows you to hide or show columns based on the screen size. Use the collapse and show classes to implement collapsible columns.

Refer to the provided code examples and documentation for further details and demonstrations on ordering columns through Bootstrap4.

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