How Can I Reorder Bootstrap 3 Columns on Larger Screens While Maintaining Mobile Layout?

Changing Column Order in Bootstrap 3 Mobile Layout

You are working with a responsive layout using Bootstrap 3.x, consisting of two columns: a sidebar (3) and content (9). While the layout renders well on desktops:

navbar
[3][9]

On mobile, the order changes:

navbar
[3]
[9]

You want to maintain the order on mobile, with the content at the top.

Solution: Reordering Columns

The approach to reordering columns varies based on screen size. In this case, you cannot change the order on smaller screens. However, you can change it in larger screens.

Step 1: Change the Order of Columns

Change the order of your columns in the code:

<!-- Main Content -->
<div>

By default, this will display the main content first, even on mobile.

Step 2: Use col-lg-push and col-lg-pull

col-lg-push and col-lg-pull allow you to reorder columns in large screens. This is how you can display the sidebar on the left and the main content on the right in larger screens:

<!-- Main Content -->
<div>

By using this method, you can reorder the columns in large screens without affecting the layout on mobile.

The above is the detailed content of How Can I Reorder Bootstrap 3 Columns on Larger Screens While Maintaining Mobile Layout?. For more information, please follow other related articles on the PHP Chinese website!