Using twitter-bootstrap to position divs on larger devices in a 2 column 'newspaper like' order -

i position div elements using twitter-bootstrap on smaller device, divs appear in order demonstrated:

small screen:

|1| |2| |3| |4| 

larger screen:

|1|3| |2|4| 

i though pull-left , pull-right classes might trick, no luck:

<div class="row">     <div class="well well-lg clearfix">         <div class="col-xs-12 col-md-6 pull-left">             <div class="alert alert-success">1</div>         </div>         <div class="col-xs-12 col-md-6 pull-left">             <div class="alert alert-warning">2</div>         </div>         <div class="col-xs-12 col-md-6 pull-right">             <div class="alert alert-info">3</div>         </div>         <div class="col-xs-12 col-md-6 pull-right">             <div class="alert alert-danger">4</div>         </div>     </div> </div> 

there jsfiddle here

typically re-order bootstrap columns on different views should use column ordering col-xx-push-* , col-xx-pull-* modifier classes.

source: http://getbootstrap.com/css/#grid-column-ordering

however you're trying re-order columns overflow in same row (ie using row display 2 rows of columns) not work. might need extend current bootstrap columns , add flex-box support better column ordering.

as seen here: (at 4:10) https://www.youtube.com/watch?v=0i7xb22zzqm

so example, following code used reset column order (having arranged [ 1 3 2 4] in code already):

@media (max-width: 992px){     .flex-row {         display:flex;         flex-direction:row;         flex-flow: column;         width: 100%;     }     .col-1 {       order: 1;     }     .col-2 {       order: 2;     }     .col-3 {       order: 3;     }     .col-4 {       order: 4;     } } 

complete fiddle here: http://jsfiddle.net/7w90ftkc/