Collapsing Columns in different orders in foundation

Question

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.

Answer 1

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>

Demo: http://codeply.com/go/pZqRjFqwX9

Answer 2

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>