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>
<p><strong>Explanation:</strong></p>
<p>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 (</p>
<p><strong>Important Notes:</strong></p>
<ul>
<li>The col-lg-push and col-lg-pull classes affect columns only on large (desktop) viewports.</li>
<li>The order of columns in your HTML should reflect the desired mobile layout.</li>
<li>Bootstrap 4 introduced the flexbox-based grid system, which introduced the .order-* classes for more flexible column ordering.</li>
</ul>
</div>

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!