Bootstrap 3: Push/pull columns over rows

Question

i have the layout on mobiles like that:

 --------- 
|    1    |  
 --------- 
|    2    |  
 --------- 
|    3    |  
 --------- 

for larger screens, i want to have it like that:

 -----------------------------------
|        1               |     3    |
 -----------------------------------
|                 2                 |
 -----------------------------------

Code, which does not work, because pull/push over one row :-(

<div class="row clearfix">
    <div class="col-sm-9 alert alert-info">
        1
    </div>
    <div class="col-sm-3  col-sm-push-3 alert alert-warning">
         2
    </div>
    <div class="col-sm-3 col-sm-pull-3 alert alert-debug">
         3
    </div>
</div>  

http://jsfiddle.net/QtPd2/27/

Answer 1

As pushing and pulling works by setting a left or right property it will never wrap to another row as you noted.

A solution is to duplicate the contents of either column 2 or 3 (take the one with the least amount of content or interactivity). Hide one one xs and the other on sm, md and lg.

In the example below I've duplicated column 2.

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

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-9 alert alert-info">
      1
    </div>
    <div class="col-xs-12 alert alert-warning hidden-sm hidden-md hidden-lg">
      2
    </div>
    <div class="col-xs-12 col-sm-3 alert alert-danger">
      3
    </div>
    <div class="col-sm-3 alert alert-warning hidden-xs">
      2
    </div>
  </div>
</div>

P.S. There is no need to add a .clearfix on a .row as it already contains that. Even if you want a column to be 12 wide on the smallest layout, always add a .col-xs-12 class as it adds padding used to negate the negative margin on the .row.