Way to force specific column down to next row in smaller sizes?

Question

Say I have three columns:

Col 1 | Col 2 | Col 3

And I would like, when the screen size changes to "small", the columns to change to this:

Col 1 | Col 3

Col 2 (in it's own full-size row)

Basically, Col 3 would go onto it's own row. Now, I know I can do this with the "visiblity" classes Foundation provides, but then you'd have to duplicate the Col 2 content twice, as far as I understand it. I'd like to avoid this if possible.

Any ideas? Or am I crazy that Foundation doesn't easily allow for this? Or maybe I should just hack it together by making Col 2 positive: absolute or something and call it a day?

Answer 1

You're looking for something called Source Ordering. (It's towards the bottom of that docs page.)

Order your html so that the columns are defined in the order 1,3,2. Then, use the push/pull classes to swap the positions of columns 3 and 2 for when they are all in the same row.

<div class="small-6 medium-4 columns">
  ... Column 1 Content ...
</div>

<div class="small-6 medium-4 columns medium-push-4">
  ... Column 3 Content ...
</div>

<div class="small-12 medium-4 columns medium-pull-4">
  ... Column 2 Content ...
</div>