4

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?

Max Hollmann
  • 345
  • 2
  • 8

1 Answers1

3
<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
Rory McCrossan
  • 331,213
  • 40
  • 305
  • 339
Pixel Phactory
  • 31
  • 2
  • That would work if the `AAA`s were two divs, but they're not. They're one div with around twice the height of `BBB` and `CCC`. – Max Hollmann Sep 07 '15 at 12:31