Home > Web Front-end > CSS Tutorial > How to Push/Pull Columns in Bootstrap 3 Only on Smaller Screen Sizes?

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

DDD
Release: 2024-11-01 12:04:29
Original
1063 people have browsed it

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>
Copy after login

This layout would appear like this on a large screen:

|    1    |  2  |  3  |  4  |    5    |
Copy after login

But you want a different layout on smaller screens:

|        1        |        5        |
|     2     |     3     |     4     |
Copy after login
Copy after login

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>
Copy after login

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     |
Copy after login

Small screens:

|        1        |        5        |
|     2     |     3     |     4     |
Copy after login
Copy after login

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!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template