Th column widths will all work fine with a regular set of classes like this:

    class="col-xs-12 col-sm-6 col-md-4"

It's just a matter of targeting `sm` sized screens to appropriately clear the content.  Based off my answer to [Change section order with Bootstrap 3][SO1], you could do something like this:



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



    @media (min-width: 768px) and (max-width: 991px) { 
        .middleDiv {
           float: right;
        }
    }

## [Demo in Fiddle][fiddle]

[![screenshot][screenshot]][fiddle-show]

[SO1]: https://stackoverflow.com/a/24872884/1366033
[fiddle]: http://jsfiddle.net/KyleMit/NDN7W/10
[fiddle-show]: http://jsfiddle.net/KyleMit/NDN7W/10/show

[screenshot]: http://i.imgur.com/h9qPozP.gif

I am trying the whole morning to solve this one. It looks obvious but somehow I can't make it work. 

I am using Bootstrap 3 and I want to have this effect with a 3 column layout

**On wide screens**  
3 column layout  
1 - 2 - 3


**On narrow screens**  
3rd column collapses under the first column to create a two column layout like:

1 | 2  
3 | 2 

At this point my 3rd column always stacks after the seconds column height!

**On phones**  
1  
2  
3  

Thanks in advance for any help