How to Achieve Responsive Push/Pull Column Behavior in Bootstrap 3?

Pushing and Pulling Columns in Bootstrap 3

When designing responsive layouts, it's often necessary to rearrange or modify columns on smaller screen sizes. While Bootstrap 3 provides classes like col-xs-6 for adjusting column widths, it does not offer direct support for pushing or pulling columns on specific breakpoints.

Achieving Responsive Push/Pull

To achieve the desired push/pull behavior on smaller screens, one can employ a counterintuitive approach: "mobile first." Start by defining the desired layout for smaller screens with your preferred col-xs-* classes, then apply col-lg-* classes with col-lg-push-* or col-lg-pull-* to position columns on larger screens.

For instance, to mimic the layout stated in the question:

<code class="html"><div class="col-lg-3 col-xs-6">1</div>
<div class="col-lg-3 col-xs-6 col-lg-push-6">5</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">2</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">3</div>
<div class="col-lg-2 col-xs-4 col-lg-pull-3">4</div></code>

This way, columns will appear in the order specified for smaller screens, while adjusting their positioning on larger desktops via col-lg-* classes. Essentially, this approach involves reversing the usual process of starting with the desktop layout and adjusting for mobile.

The above is the detailed content of How to Achieve Responsive Push/Pull Column Behavior in Bootstrap 3?. For more information, please follow other related articles on the PHP Chinese website!