Rearrange with bootstrap 3

Question

Can someone help me with html reorder the columns below using bootstrap 3:

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

For this:

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

I know this has something to do with push / pull, I just can't figure it out right.

Edit

And the som code I can't work with:

 <div class="row"> <div class="col-md-8 col-xs-12">2</div> <div class="col-md-2 col-xs-12 col-md-push-2">1</div> <div class="col-md-8 col-xs-12 col-md-pull-2">3</div> </div> 

On a mobile device, it looks good, but not on the desktop.

Decision

 <div class="row"> <div class="col-md-8 col-xs-12 col-md-push-2">2</div> <div class="col-md-2 col-xs-12 col-md-pull-8">1</div> <div class="col-md-8 col-xs-12">3</div> </div> 

Answer 1

This is pretty simple, they indicate that we cannot reorder columns in mobile mode. First we need to think of it as mobile, and then reorder the columns on large screens using .col-*-push-# , .col-*-pull-# helper classes:

 .red { background: red; } .blue { background: blue; } .green { background: green; } 

 <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="row"> <div class="red col-sm-4 col-sm-push-4">2</div> <div class="green col-sm-4 col-sm-pull-4">1</div> <div class="blue col-sm-4">3</div> </div> </div> 

Answer 2

Use a custom class for each and use the CSS flex concept.

HTML

 <div class="row"> <div class="col-md-4 one">First box</div> <div class="col-md-4 two">Second Box</div> <div class="col-md-4 three">Third Box</div> </div> 

CSS

 .row { display: flex; flex-direction: column; } .one { order: 2; } .two { order: 1; } .three { order: 3; } 

Codeply