How to Reorder Bootstrap 3 Columns for Mobile-First Layout?

Reordering Bootstrap 3 Columns in Mobile Layout

Problem:

A responsive layout features a fixed top navbar and two columns beneath it: a sidebar and main content. While the layout functions as expected on desktop, on mobile devices, the sidebar stacks on top of the main content, putting it in the undesired position. The desired order on mobile is to display the main content first, followed by the sidebar.

Answer:

Directly altering the column order on mobile is not feasible in Bootstrap 3. However, a workaround is to utilize Bootstrap's responsive column reordering feature for large screens.

Steps:

1. Rearrange the column order in the HTML, placing the main content first:

<div class="col-lg-9 col-lg-push-3">...</div>
<div class="col-lg-3 col-lg-pull-9">...</div>

2. By default, these classes display the main content first even on mobile devices.
3. The class col-lg-push-3 pushes the main content three columns to the right, while col-lg-pull-9 pulls the sidebar nine columns to the left, resulting in the desired order on large screens.

Explanation:

In Bootstrap, columns can be repositioned using col-push and col-pull for specific screen sizes. By using col-lg-push and col-lg-pull for large screens, the columns will assume the specified order on those screens while maintaining the original order on smaller devices.

The above is the detailed content of How to Reorder Bootstrap 3 Columns for Mobile-First Layout?. For more information, please follow other related articles on the PHP Chinese website!