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> 

demo: http://codeply.com/go/pzqrjfqwx9


Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -