How do I change Bootstrap 3 column order on mobile layout?

html

responsive-design

css

bootstrap

byAnton Shumikhin·Feb 11, 2025

In Bootstrap 3, reposition your columns on mobile screens using .col-xs-push-* and .col-xs-pull-* classes. To shuffle a right column to the top on mobile, add .col-xs-push-6 to the left-hand column and .col-xs-pull-6 to the right-hand column. Hence, their order swaps in mobile view.

<div class="row">
  <div class="col-xs-6 col-xs-push-6">
    <!-- Right goes left, like playing musical chairs -->
  </div>
  <div class="col-xs-6 col-xs-pull-6">
    <!-- Left takes a step right, joining the musical chairs game -->
  </div>
</div>

The * in .col-xs-push-* and .col-xs-pull-* signifies your column width, guaranteeing that the columns swap places when transitioning to mobile view.

Navigating through the sea of layout management

While designing responsive layouts, you may sail through various terrains that require specific reordering of the layouts. Let's surf through some common scenarios and the tactics to best handle them.

When your layout hosts a sidebar, you may want to prioritize this content on mobile devices. Unfortunately, Bootstrap 3 doesn't really say, "Your wish is my command," to column reordering on small screens. But fear not, you can nest rows within columns to achieve this.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-md-4 col-md-push-8">
      <!-- Sidebar: Right on desktop, Top on mobile -->
    </div>
    <div class="col-xs-12 col-md-8 col-md-pull-4">
      <!-- Main content: Left on desktop, Bottom on mobile -->
    </div>
  </div>
</div>

On the desktop view, the main content willingly takes a step to the left, allowing the sidebar to slide in on the right. However, on mobile, the order-restyling classes rest, upholding the source order and placing the sidebar on top of the main content.

Scenario 2: Full-width columns on mobile splitting on large screens

If you're a newcomer to responsive design, remember to start your journey with a mobile-first approach. Use .col-12 to gift each column with full-width on mobile screens, and enhance the view for larger screens with breakpoints.

<div class="row">
  <div class="col-12 col-md-6">
    <!-- Full width on mobile, sharing on medium screens -->
  </div>
  <div class="col-12 col-md-6">
    <!-- Same as above, good manners never go out of style -->
  </div>
</div>

Scenario 3: Advanced layouts with nested grids

With complex layouts, we require fine control. Nesting rows within columns permits elaborate designs without messing with the Bootstrap grid system.

<div class="row">
  <div class="col-md-6">
    <div class="row">
      <div class="col-md-6">
        <!-- Building nested content, the inception of grids -->
      </div>
      <div class="col-md-6">
        <!-- More nested content, because we love inception -->
      </div>
    </div>
  </div>
  <!-- Space for more columns, if you like to live on the edge -->
</div>

Scenario 4: Removing gutters for a seamless look

Sometimes, you may aspire to remove gutters between columns for a snuggly layout. Bootstrap 3 doesn't throw a .no-gutters class into your bucket, but a quick leap into CSS territory grants you a cleaner, gutter-free look.

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.no-gutters > [class*='col-'] {
  padding-right: 0;
  padding-left: 0;
}

Simply apply your custom .no-gutters class to the row and watch the effect it creates.

Diving deeper into "order" within modern design

The CSS "order" property offers a power-packed punch in modern browsers. Synchronized with flexbox, it empowers you to reorder flex items without wrestling the HTML source. Pair it with media queries to enforce it during specific breakpoints, rendering a flexible adaption:

@media (min-width: 768px) {
  .content {
    order: 1; /* Takes the lead on tablets and above */
  }
  .sidebar {
    order: 2; /* Content's might companion -->
  }
}

Flexing with Bootstrap 4's Reordering Classes

Though our journey is mapped around Bootstrap 3, it's worth parking to observe that Bootstrap 4 muscles up the reordering with classes like .order-first and .order-last. With flexbox rallying by default in Bootstrap 4, the .flex-column-reverse or .flex-row-reverse shoulder the responsibility of easy column reordering on mobile.

<!-- Bootstrap 4 example -->
<div class="d-flex flex-column-reverse flex-md-row">
  <!-- Content reverses faster than you can say 'Bootstrap' -->
</div>