Home > Web Front-end > CSS Tutorial > How Can I Reverse Bootstrap 3 Column Order on Mobile Layouts?

How Can I Reverse Bootstrap 3 Column Order on Mobile Layouts?

Barbara Streisand
Release: 2024-12-12 17:35:11
Original
957 people have browsed it

How Can I Reverse Bootstrap 3 Column Order on Mobile Layouts?

Reordering Bootstrap 3 Columns in Mobile Layouts

When designing responsive layouts, it's often necessary to adjust the order of columns on smaller screens. This article addresses the specific issue of changing the column order in a Bootstrap 3 mobile layout, where a sidebar column currently stacks on top of the main content column.

Problem:

I have a responsive layout with a navbar, sidebar, and main content. On desktop, the layout appears as:

navbar
[3][9]
Copy after login

However, on mobile, the layout changes to:

navbar
[3]
[9]
Copy after login

I would like to reverse the order on mobile to:

navbar
[9]
[3]
Copy after login

Solution:

While it's not possible to directly change the column order on mobile using Bootstrap's built-in grid system, there is a workaround. By reversing the order of the columns in the HTML code, you can manipulate how they appear on different screen sizes.

In this case, we have:

<div>
Copy after login
Copy after login

To reverse the order on mobile, change it to:

<div>
Copy after login
Copy after login

By default, this will display the main content first, even on mobile devices. The col-lg-push and col-lg-pull classes are used to reorder the columns on larger screen sizes, ensuring that the sidebar remains on the left and the main content on the right.

Note: This solution only works for large screen sizes (e.g., laptops). On smaller screens, the columns will still stack as intended by Bootstrap.

The above is the detailed content of How Can I Reverse Bootstrap 3 Column Order on Mobile Layouts?. 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
Latest Articles by Author
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template