Clever Geek Handbook

Twitter Bootstrap 3 - Sharing Columns on Ultra Small Devices

I have two columns in Twitter bootstrap, they look like this:

<div class="col-md-4 col-sm-6 col-xs-12">
   <div class="post">
      Something here
   </div>
</div>
<div class="col-md-8 col-sm-6 col-xs-12">
   <div class="post">
      Something here
   </div>
</div>

It scales fine to full width at xs resolution, but I would like to swap those two columns with each other so that the second column in the code will be the first column to be displayed and the first column in the code will be the second column to be displayed.

I tried to use col-xs-pull-12

and col-xs-push-12

, but it gave me strange results, the columns were completely off the grid. How can I change them using bootstrap classes? I want this to happen with xs resolution only.

+3


source to share


1 answer


You need to use pull

it push

correctly. That is, for larger devices:

  • Rearrange the order of your markup exactly the way you want it on mobile - Mobile first

  • Add push

    and pull

    to reorder on larger devices

    <div class="col-md-8 col-md-push-4 col-sm-6 col-sm-push-6 col-xs-12">
   <div class="post">
      Something here Now
   </div>
</div>
<div class="col-md-4 col-md-pull-8 col-sm-6 col-sm-pull-6 col-xs-12">
   <div class="post">
      Something here 
   </div>
</div>


Check BottplyDemo

+11


source






More articles:


All Articles