Not sure if this is possible but i'm wanting to code the following columns in Foundation 5 to collapse like the below.
Large:
[1][2][3][4]
Medium:
[1][4]
[2][3]
Small:
[1]
[2]
[3]
[4]
Medium is the breakpoint that is screwing me over.
Can someone help?
Cheers.
This is a challenging one. I think you have a few options that both use nesting. One would get you the correct layout on medium but won't work on small..
<div class="row">
<div class="large-6 medium-6 columns">
<div class="row">
<div class="large-6 medium-12 columns">1</div>
<div class="large-6 medium-12 columns">2</div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="row">
<div class="large-6 medium-12 large-push-6 columns">4</div>
<div class="large-6 medium-12 large-pull-6 columns">3</div>
</div>
</div>
</div>
The other option is to duplicate the last row and use the visibility classes..
<div class="row">
<div class="large-6 medium-6 columns">
<div class="row">
<div class="large-6 medium-12 columns">1</div>
<div class="large-6 medium-12 columns">2</div>
</div>
</div>
<div class="large-6 medium-6 columns">
<div class="row show-for-medium-up">
<div class="large-6 medium-12 large-push-6 columns">4</div>
<div class="large-6 medium-12 large-pull-6 columns">3</div>
</div>
<div class="row show-for-small-only">
<div class="small-12 large-push-6 columns">3</div>
<div class="small-12 medium-12 large-pull-6 columns">4</div>
</div>
</div>
</div>
Hi "Source Ordering" would push your columns outside the grid, but you could show/hide other columns.
See: Foundation 5 Grid Push Pull
My fiddle: http://jsfiddle.net/s6p6uguL/3/
<div class="row">
<div class="small-12 medium-6 large-4 columns"><h1>1</h1></div>
<div class="small-12 medium-6 large-4 columns show-for-medium"><h1>4</h1></div>
<div class="small-12 medium-6 large-4 columns"><h1>2</h1></div>
<div class="small-12 medium-6 large-4 columns"><h1>3</h1></div>
<div class="small-12 medium-6 large-4 columns hide-for-medium"><h1>4</h1></div>
</div>
