Flipping 3 column grid order in Bootstrap -
i have 3 column grid needs flip column order when breakpoint large.
- at small breakpoint columns should display col3 col2 col1
- at medium breakpoint columns should display col2 col1 col3
- 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
Post a Comment