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

Carol Skelly · Accepted Answer · 2017-08-23T12:00:59.577

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

Well in XS mode I want col-12 blocks [1][2][3][4][5][6] in SM mode col-6 blocks in order [1][3][4][5][2][6] and from MD mode and larger col-4 blocks in [1][3][4][2][6][5] order :) Mobile first approach, but very hard to realize — user3411864, Apr 03 '14 at 14:57

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

1 Answers1

Linked