CODEWITHSUNDEEP
twitter-bootstrap-3
Max Hollmann
Max Hollmann

Reputation: 345

Bootstrap 3: Change vertical ordering of .col-X elements when collapsing

I have the following layout when on a large display:

AAA BBB
AAA CCC

(all A's, all B's, and all C's form one div, so there are 3 elements here)

Now when this collapses I want it to become

BBB
AAA
AAA
CCC

I tried specifying the elements in this order in the HTML, but then the best I could manage to get for the expanded view was (using .push-X classes)

AAA BBB
AAA
    CCC

The only solutions I can think of are moving things around by JS, or having duplicates of CCC at the correct position and showing and hiding them depending on viewport size.

Is there a cleaner way to do this?

Upvotes: 4

Views: 3553

Answers (1)

Pixel Phactory
Pixel Phactory

Reputation: 21

<div class="row">
   <div class="col-xs-12 col-md-6 col-md-push-6">BBB</div>
   <div class="col-xs-12 col-md-6 col-md-pull-6">AAA</div>
   <div class="col-xs-12 col-md-6 ">AAA</div>
   <div class="col-xs-12 col-md-6 ">CCC</div>
</div>

That will work.

How is it done?... Firstly you need to arrange your content first and foremost for mobile (so consider mobile the 'natural' order i.e.

BBB
AAA
AAA
CCC

Then, when you expand to desktop you'll get this:

BBB AAA  <--- wrong order
AAA CCC

So, you then need to swap the order by pushing the BBB content to the right, and pulling the AAA content to the left

BBB------>.
.<------AAA

Upvotes: 2

Related Questions