Row / column order with pull / push / offset in Bootstrap

Question

This question is for Twitter Bootstrap 3. I have three columns whose order and size I want to distinguish depending on the screen size.

On md :

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

In sm :

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

I think I need to play with pulls / push with the second and third col elements, but I can't fix it ...

I know this doesn't work, but so far it looks like ...

 <div class="row"> <div class="col-sm-6 col-md-4 form-group"> ... </div> <div class="col-sm-12 col-sm-push-6 col-md-4 form-group"> ... </div> <div class="col-sm-6 col-sm-pull-6 col-md-4 form-group"> ... </div> </div> 

Answer 1

What does it look like? Live view

 <div class="row"> <div class="col-sm-6 col-md-4 form-group"> 1 </div> <div class="col-sm-6 col-md-4 col-md-push-4 form-group"> 3 </div> <div class="col-sm-12 col-md-4 col-md-pull-4 form-group"> 2 </div> </div> 

Hope this helps!