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

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

In Twitter Bootstrap 3, the col-lg-push and col-lg-pull classes allow developers to manipulate the order of columns in a grid layout on desktop and above viewports. This functionality is particularly useful when creating responsive layouts that need to display columns in a specific order on particular screen sizes.

Understanding col-lg-push and col-lg-pull

• col-lg-push-x: This class pushes a column to the right by the specified number of columns, effectively shifting its position to the right in the grid.
• col-lg-pull-x: This class pulls a column to the left by the specified number of columns, shifting its position to the left in the grid.

Syntax and Usage

To use these classes, simply add them to the col-lg-* class that defines the width of the column. For example, if you want to push a column to the right by 5 columns, you would use the col-lg-5 col-lg-push-5 class.

Example

Consider the following markup:

<div class="row">
  <div class="col-lg-5 col-lg-push-5">Content B</div>
  <div class="col-lg-5 col-lg-pull-5">Content A</div>
  <div class="col-lg-2">Content C</div>
</div>

On desktop viewports (where lg applies), Content B will be pushed to the right by 5 columns, placing it to the right of Content C. Content A will be pulled to the left by 5 columns, effectively placing it to the left of Content B. This results in the following layout:

[Content B] [Content A] [Content C]

Exception on Mobile Viewports

It's important to note that the push and pull functionality only applies to viewports larger than or equal to the specified size. For example, if you use col-lg-push-5, it will only push the column on desktop viewports (where lg applies). On mobile viewports, the columns will render in their default order.

Conclusion

The col-lg-push and col-lg-pull classes provide a powerful way to manipulate the order of columns in Bootstrap 3 layouts. By understanding the syntax and usage guidelines, developers can create responsive layouts that adapt to different screen sizes while maintaining a desired visual hierarchy.

The above is the detailed content of How Can I Control 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!