Bootstrap reordering columns on small Devices -


i have simple layout 2 columns in twitter bootstrap.

on large devices large colum should on left side , small on right one. when view page on mobile device smaller screen , pages stacked have left colum on top of right one.

large devices: ----- colum 1 --- colum 2---- small devices: ----- colum 2 ----- ----- colum 1 ----- 

my code @ moment following:

<div class="row clearfix">     <div class="col-md-9 column">             <div class="col-md-3 column"> </div> 

if understood correctly, need this:

<div class="container">   <div class="row">     <div class="col-xs-12">       <div class="col-md-3 pull-right">field2 - width 3</div>       <div class="col-md-9 pull-right">field1 - width 9</div>     </div>     </div> </div> 

bootply demo

the base approach mobile first. set smallest screen first , apply adjustments larger screen sizes.

"pull-right" on every field reverse order.


Comments

Popular posts from this blog

c++ - Delete matches in OpenCV (Keypoints and descriptors) -

java - Could not locate OpenAL library -

sorting - opencl Bitonic sort with 64 bits keys -