How to Use Push/Pull Bootstrap 3 Columns to Create Different Layouts for Smaller Screens?

Push/Pull Bootstrap 3 Columns on Smaller Screens Only

In the realm of responsive design, it can be desirable to alter the layout of elements based on screen size. Bootstrap 3 offers push and pull utilities for adjusting column order and position dynamically.

One such case is when you wish to maintain a different column arrangement on smaller screens while preserving the original layout on larger desktops. Consider the following example:

Initial Layout:

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

Desired Layout on Smaller Screens:

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

Solution:

To achieve this layout, we can utilize the following approach:

<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 solution prioritizes the mobile layout by setting the column order and positions for smaller screens. Then, on larger desktops, we apply push and pull utilities to rearrange the columns into the desired desktop layout.

This approach allows for flexible and responsive layouts that adapt to different screen sizes while maintaining the desired column arrangement.

The above is the detailed content of How to Use Push/Pull Bootstrap 3 Columns to Create Different Layouts for Smaller Screens?. For more information, please follow other related articles on the PHP Chinese website!