How to Change Bootstrap 3 Column Order on Mobile?

How to Reorder Bootstrap 3 Column Order on Mobile Layout

When creating responsive layouts using Bootstrap 3, you may encounter a situation where the order of columns changes when transitioning from desktop to mobile view. To address this and ensure the main content remains at the top on mobile devices, follow these steps:

1. Invert the Column Order:

Instead of using the standard column order (sidebar on left, content on right) for desktop view, switch the order for mobile view. For example:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

2. Use the push and pull classes:

In the desktop view, use col-lg-push and col-lg-pull to push the main content to the right and pull the sidebar to the left, effectively swapping their order.

<div class="row">
  <div class="col-lg-9 col-lg-push-3">
    <!-- Main content -->
  </div>
  <div class="col-lg-3 col-lg-pull-9">
    <!-- Sidebar -->
  </div>
</div>

3. Reverse the order of columns:

Alternatively, you can reverse the order of the columns in the HTML, so that the main content comes first:

<div class="row">
  <div class="col-md-9 col-xs-12">
    <!-- Main content -->
  </div>
  <div class="col-md-3 col-xs-12">
    <!-- Sidebar -->
  </div>
</div>

By following these steps, you can effectively reorder the columns on mobile view in Bootstrap 3, ensuring the desired content hierarchy.

The above is the detailed content of How to Change Bootstrap 3 Column Order on Mobile?. For more information, please follow other related articles on the PHP Chinese website!