How to Push/Pull Columns in Bootstrap 3 Only on Smaller Screen Sizes?

Bootstrap 3: How to Push/Pull Columns on Smaller Screen Sizes Only

Bootstrap provides the functionality to push and pull columns to adjust their layout based on screen size. However, sometimes you may encounter a situation where you want to push/pull columns only on smaller screen sizes while maintaining their positions on larger screens.

Consider the following HTML structure:

<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>

This layout would appear like this on a large screen:

|    1    |  2  |  3  |  4  |    5    |

But you want a different layout on smaller screens:

|        1        |        5        |
|     2     |     3     |     4     |

Solution:

To achieve this, we need to approach the problem with "mobile first" thinking. Configure the layout for the smallest screen size first, then use push/pull classes to move the columns into the desired positions on larger screens.

Updated HTML:

<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>

By placing the column classes for both large and small screens in the same tag, we can ensure the columns are placed in the desired order on tablets first. Then, the push/pull classes are used to adjust their positions on desktops.

This updated code will result in the desired layout on all screen sizes:

Large screens:

|    1    |        5        |     2     |     3     |     4     |

Small screens:

|        1        |        5        |
|     2     |     3     |     4     |

The above is the detailed content of How to Push/Pull Columns in Bootstrap 3 Only on Smaller Screen Sizes?. For more information, please follow other related articles on the PHP Chinese website!