How to Rearrange Bootstrap 3 Columns Using `col-lg-push` and `col-lg-pull`?

Rearranging Column Order with col-lg-push and col-lg-pull in Twitter Bootstrap 3

Column ordering in Bootstrap 3 allows developers to adjust the position of columns within rows for different screen sizes. The col-lg-push and col-lg-pull classes are specifically designed for this purpose, providing control over the layout of columns on large screen devices (desktops and laptops).

To customize the column order, you need to:

1. Define the order in HTML: Change the order of the columns in your HTML markup. For example, if you want the second 5-grid column to appear first, place its content before the first 5-grid column in your code.
2. Use push class: Add the col-lg-push-5 class to the column you want to move to the right. This class will push the column by 5 columns from its original position.
3. Use pull class: Add the col-lg-pull-5 class to the column you want to move to the left. This class will pull the column by 5 columns towards the left.

Example:

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

Explanation:

In this example, the Second column is pushed to the right by 5 columns using col-lg-push-5, making it appear after the Third column on large screens. The First column is pulled to the left by 5 columns using col-lg-pull-5, bringing it before the Third column. This creates the desired layout: [5] (second), [5] (first), [2] on mobile and [5] [5] [2] on desktop.

Understanding Pull and Push:

• Pull: Moves a column to the left.
• Push: Moves a column to the right.

Note:

• The push and pull classes only affect the order of columns on specified screen sizes (in this case, large screens).
• The classes have no effect on smaller screen sizes, as Bootstrap prioritizes the mobile layout by default.

The above is the detailed content of How to Rearrange Bootstrap 3 Columns Using `col-lg-push` and `col-lg-pull`?. For more information, please follow other related articles on the PHP Chinese website!