Column Order Manipulation Using Col-Lg-Push and Col-Lg-Pull in Twitter Bootstrap 3

<div class="row">  <div class="col order-2">1st yet 2nd</div>  <div class="col order-1">2nd yet 1st</div></div>

Column order manipulation using col-push and col-pull in Bootstrap 3

You'll need to offset just the first column, and reset the offset in the second column, like so:

HTML

<div class="row">
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-2></div>
    <div class="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-0"></div> 
</div> 

Pushing column to next line with col-md-push-*

You're right, there is no way to push down to the next line in Bootstrap 3.x.

But, if you think "mobile first", you would first create the sm layout, and then push/pull it accordingly for larger screens..

<div class="container">
    <div class="row">
        <div class="col-sm-6 col-md-4">  
            <div class="well"> 1 </div>
        </div>
        <div class="col-sm-6 col-sm-push-0 col-md-4 col-md-push-4">
            <div class="well"> 3 </div>
        </div>
        <div class="col-sm-6 col-sm-pull-0 col-md-4 col-md-pull-4">
            <div class="well"> 2 </div>
        </div>

        <div class="clearfix hidden-sm"></div>

        <div class="col-sm-6 col-md-4">
            <div class="well"> 4 </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> 5 </div>
        </div>
        <div class="col-sm-6 col-md-4">
            <div class="well"> 6 </div>
        </div>
    </div>
 </div>

http://www.bootply.com/127076

Update Bootstrap 4.x

Now in Bootstrap 4 Beta it's possible to "push" or "pull" columns to the next "row" using the flexbox ordering classes:

https://www.codeply.com/go/MELnKiqofA

Change column order using bootstrap push and pull

I found a great answer that it may be useful to you
Column order manipulation using col-lg-push and col-lg-pull in Twitter Bootstrap 3

Bootstrap is a "mobile first" framework, so your HTML should reflect the mobile version of your site. The Pushing and Pulling are then done on the larger screens.

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.

Twitter Bootstrap 3 : Customize column stack order when viewed in Mobile screen

It seems like push and pull makes the job easy. Here is DEMO Here is the HTML

<div class="container">
<div class="row">
     <div class="col-sm-4 col-sm-push-8">
             <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 3
            </div>
            </div>
    </div>
    <div class="col-sm-4 col-sm-pull-4">
            <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 1
            </div>
            </div>
    </div>
    <div class="col-sm-4 col-sm-pull-4">
             <div class="panel panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Panel title</h3>
            </div>
            <div class="panel-body">
               Hello 2
            </div>
            </div>
    </div>

</div>

Column ordering in Bootstrap 4 with push/pull and col-md-12

UPDATE (FEB 2018) - v4+

Now that bootstrap has been released, you can achieved that using order utility classes as you were able to do it in beta version (see old update below), with the difference that they've added these 3 new classes:

.order-first {
  -webkit-box-ordinal-group: 0;
  -ms-flex-order: -1;
  order: -1;
}

.order-last {
  -webkit-box-ordinal-group: 14;
  -ms-flex-order: 13;
  order: 13;
}

.order-0 {
  -webkit-box-ordinal-group: 1;
  -ms-flex-order: 0;
  order: 0;
}

Snippet

.p-2 {
  background: red;
  border: white 5px solid
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column">
  <div class="p-2">1</div>
  <div class="p-2 order-first order-lg-2">2</div>
</div>

<div class="col-12 col-lg-8 d-flex">
    <div class="row flex-1">
        <div class="col-12">
            <h1>RESULTS</h1>
        </div>
        <div class="col-12 col-lg-6">
            <h1>Stats</h1>
        </div>
        <div class="col-12 col-lg-6">
            <h1>Perf</h1>
        </div>
    </div>
</div>
<div class="col-12 col-lg-4 order-first">
</div>

<div class="row">
  <div class="col-sm-9">
    Level 1: .col-sm-9
    <div class="row">
      <div class="col-xs-8 col-sm-6">
        Level 2: .col-xs-8 .col-sm-6
      </div>
      <div class="col-xs-4 col-sm-6">
        Level 2: .col-xs-4 .col-sm-6
      </div>
    </div>
  </div>
</div>