How Can Bootstrap's `col-lg-push` and `col-lg-pull` Classes Manipulate Column Order?

Column Order Manipulation Using Grid Ordering in Bootstrap

Bootstrap's grid system allows for precise control over the layout and ordering of columns. The col-lg-push and col-lg-pull classes enable you to push or pull columns to specific positions within a row on desktop viewports (>= lg).

How to Use col-lg-push and col-lg-pull

To push or pull a column, specify the desired number after col-lg-push or col-lg-pull. For instance, col-lg-pull-5 would pull a column 5 columns to the left, starting from its default position.

Example: Reordering Columns for Mobile and Desktop

Let's take the example you provided:

[5] [5] [2]  (Desktop)

[5] (second)
[5] (first)
[2]  (Mobile)

To achieve this layout using Bootstrap's grid ordering, you would use the following code:

<div>

Explanation:

On desktop viewports (>= lg), the column order in your HTML will determine the layout. Therefore, Content B will be pushed to the right by 5 columns, placing it after Content A. On mobile viewports (< lg), the default order will apply, rendering Content B first, followed by Content A.

Important Notes:

• The col-lg-push and col-lg-pull classes affect columns only on large (desktop) viewports.
• The order of columns in your HTML should reflect the desired mobile layout.
• Bootstrap 4 introduced the flexbox-based grid system, which introduced the .order-* classes for more flexible column ordering.

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