Flipping 3 column grid order in Bootstrap -


i have 3 column grid needs flip column order when breakpoint large.

  1. at small breakpoint columns should display col3 col2 col1
  2. at medium breakpoint columns should display col2 col1 col3
  3. at large breakpoint columns should display col 1 col2 col3

this jsfiddle behaves correctly col-sm , col-md breakpoints. i've attempted adding push/pull classes affect desired large breakpoint behavior (condition 3 above) unable make work. think i'm getting tripped ordering occurs @ col-md. want small, medium , large ordering behaviors. how accomplished?

<div class="container">   <div class="row-fluid">     <div class="col-xs-12 col-sm-12  col-md-3 col-md-push-9 bg-warning">       column 3     </div>     <div class="col-xs-12 col-sm-12  col-md-5 col-md-pull-3  bg-danger">       column 2     </div>     <div class="col-xs-12 col-sm-12  col-md-4 col-md-pull-3  bg-success">column 1     </div>   </div> </div> 

i figured out. here's solution in jsfiddle.

<div class="container">   <div class="row-fluid">     <div class="col-xs-12 col-sm-12  col-md-3 col-md-push-9 bg-warning">       column 3     </div>     <div class="col-xs-12 col-sm-12  col-md-5 col-md-pull-3 col-lg-push-1 bg-danger">       column 2     </div>     <div class="col-xs-12 col-sm-12  col-md-4 col-md-pull-3  col-lg-pull-8 bg-success">column 1     </div>   </div> </div> 

Comments

Popular posts from this blog

mysql - Dreamhost PyCharm Django Python 3 Launching a Site -

java - Sending SMS with SMSLib and Web Services -

java - How to resolve The method toString() in the type Object is not applicable for the arguments (InputStream) -