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

Question

I have the following 6 building blocks:

[1][2] 
[3][4]
[5][6]

All blocks have a col-sm-6 class in one row. But since block 3 exceeds bootstraps 12 columns structuur it will jump to the next line. Perfect that's what I want.

The only thing is, I want to swap block 2 and 3. But it only works for blocks on the same line. So 1 and 2 can swap, but 2 and 3 not (in SM mode)

 <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-6 col-md-4 col-md-push-0">
        <div class="well"> 2 </div>
    </div>
    <div class="col-sm-6 col-sm-pull-6 col-md-4 col-md-pull-0">
        <div class="well"> 3 </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>

It will create:

    [1]   [2]
 [3]   [4]
    [5][6]

See http://www.bootply.com/127062

Answer 1

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