How to Change Bootstrap 3 Column Order on Mobile Layout

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

You cannot change the order of columns in smaller screens but you can do that in large screens.

So change the order of your columns.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

By default this displays the main content first.

So in mobile main content is displayed first.

By using col-lg-push and col-lg-pull we can reorder the columns in large screens and display sidebar on the left and main content on the right.

Working fiddle here.

Bootstrap column order on mobile?

You can Use boostrap class col-lg-push-x and col-lg-pull-x.

Also see Demo Here: enter link description here

Exp:

<div class='row'>
<div class='col-lg-5 col-lg-push-5'>World</div>
<div class='col-lg-5 col-lg-pull-5'>Hello</div>
<div class='col-lg-2'></div>
</div>

change bootstrap grid column order when page in mobile view

In bootstrap 3, you can use col-xs- to make columns on mobile screens.

The code below makes 2 columns on tablets and mobiles, and 4 columns on larger screens:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="container">
 <div class="row">
   <div class="col-xs-6 col-md-3">
     <div class="alert alert-info">a</div>
   </div>
   <div class="col-xs-6 col-md-3">
     <div class="alert alert-danger">b</div>
   </div>
   <div class="col-xs-6 col-md-3">
     <div class="alert alert-info">c</div>
   </div>
   <div class="col-xs-6 col-md-3">
     <div class="alert alert-info">d</div>
   </div>
 </div>
</div>

How to reorder bootstrap columns based on mobile view

With Bootstrap 3

You can use push and pull classes

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
   <div style="border: 1px solid red" class="col-sm-4 col-lg-push-8 col-sm-push-7">
      content
   </div>
   <div style="border: 1px solid green" class="col-lg-8 col-sm-7 col-sm-pull-4">
      <div class="post-media">
            <div id="slider" class="flexslider">
               <ul class="slides">
                  <li></li>
               </ul>
            </div>
            <div id="carousel" class="flexslider">
               <ul class="slides">
                  <li></li>
               </ul>
            </div>
      </div>
      <div class="row mTop-20">
            <div class="col-sm-5 col-lg-12">
               content
            </div>
      </div>
   </div>
</div>

Swapping Bootstrap column order in single row on mobile

The issue is that Bootstrap-4 dropped the order-xs class as it is the default class. If you want to apply changes for only xs-classes you have to change the roder for all elements and use order-sm--class to correct the order at sm-width:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-lg-6 col-xs-4 order-2 sm-order-1">
        Logo
        </div>
        <div class="col-lg-6 col-xs-4 order-1 sm-order-2">
        Menu
        </div>
        <div class="col-xs-4 hidden-lg order-3 sm-order-3">
        Button
        </div>
    </div>
</div>