html5 - Collapsing Columns in different orders in foundation -
not sure if possible i'm wanting code following columns in foundation 5 collapse below.
large:
[1][2][3][4]
medium:
[1][4]
[2][3]
small:
[1]
[2]
[3]
[4]
medium breakpoint screwing me over.
can help?
cheers.
this challenging one. think have few options both use nesting. 1 correct layout on medium 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 duplicate last row , use 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>
Comments
Post a Comment