3

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 down to full-width perfectly when on xs resolution, but I would like to swap those two columns with each other, so that the second column in the code would be the first column displayed and the first column in the code would be the second column displayed.

I tried using col-xs-pull-12 and col-xs-push-12 but it gave me weird results, columns were absolutely off grid. How can I swap them using bootstrap's classes? I want this to happen only on xs resolution.

NakedCat
  • 852
  • 1
  • 11
  • 40
  • 1
    You can't use `col-*-push-#`/`col-*-pull-#` classes to achieve that. Have a look at: http://stackoverflow.com/questions/25714852/change-the-order-of-col-12-columns-in-bootstrap-3-by-using-push-pull/25715035?s=20|3.2695#25715035 Also if supporting IE9- is not a concern, you could use *flexbox layout* and use `order` property. – Hashem Qolami Nov 04 '14 at 15:47
  • Sorry for the duplicate post, I composed a vague search phrase, that's why I didn't see the question posted before mine. I suppose I should delete the question now. – NakedCat Nov 04 '14 at 16:02
  • No worries.. it's okay. Better not to delete the question as the others may find this from the result of search engines. – Hashem Qolami Nov 04 '14 at 16:04

1 Answers1

14

You need to use pull and push on the right way .... That is for the larger devices:

  1. Change the order of your markup exact the same you want on Mobile -- Mobile First

  2. Add push and pull to change the order 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 this BottplyDemo

DaniP
  • 37,813
  • 8
  • 65
  • 74