How Can I Manipulate Column Order in Bootstrap 3 Using `col-lg-push` and `col-lg-pull`?

Column Order Manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

Twitter Bootstrap's convenient col-lg-push and col-lg-pull classes provide the flexibility to manipulate the order of columns on larger screens (desktop or laptop).

Understanding the Syntax

The syntax for these classes is:

• col-vp-push-x: Pushes the column x number of columns to the right, starting from its normal position on view-ports greater than or equal to vp.
• col-vp-pull-x: Pulls the column x number of columns to the left, starting from its normal position on view-ports greater than or equal to vp.

Here, vp can be xs, sm, md, or lg, while x ranges from 1 to 12.

Example Scenarios

Consider the following example where you want to display a grid of 3 columns: 2 with length 5 and 1 with length 2.

• Desktop View (≥ lg): Display [5] [5] [2] horizontally.
• Mobile View (≤ sm): Display [5] (second) [5] (first) [2] vertically.

Code:

<div class='row'>
  <div class='col-lg-5 col-lg-push-5'></div>
  <div class='col-lg-5 col-lg-pull-5'></div>
  <div class='col-lg-2'></div>
</div>

Explanation:

• The first col-lg-5 element is pushed 5 columns to the right, so it will start 5 columns after its normal position.
• The second col-lg-5 element is pulled 5 columns to the left, so it will start 5 columns before its normal position.
• The col-lg-2 element remains in its default order.

Note: To ensure correct functionality, ensure that the order of the elements in the markup matches the desired order on the larger screens.

The above is the detailed content of How Can I Manipulate Column Order in Bootstrap 3 Using `col-lg-push` and `col-lg-pull`?. For more information, please follow other related articles on the PHP Chinese website!