Menu icon Foundation
push & pull ordering

Hello!
How can i order columns to be in desktop view
[ 8   [ 4a ]
     ] [ 4b ]

and in mobile view
[ 4b ]
[ 8 ]
[ 4a ]

I've tried but do not works fine.

<div class="large-12 columns">
<div class="medium-4 medium-push-8 columns"><div class="panel">1</div><div class="panel">2</div></div>
<div class="medium-8 medium-pull-4 columns"><div class="small-12 columns"><div class="panel">centro</div></div></div>
<div class="medium-4 columns"><div class="panel">3</div><div class="panel">4</div></div>
</div>

pushpullsource ordering

Hello!
How can i order columns to be in desktop view
[ 8   [ 4a ]
     ] [ 4b ]

and in mobile view
[ 4b ]
[ 8 ]
[ 4a ]

I've tried but do not works fine.

<div class="large-12 columns">
<div class="medium-4 medium-push-8 columns"><div class="panel">1</div><div class="panel">2</div></div>
<div class="medium-8 medium-pull-4 columns"><div class="small-12 columns"><div class="panel">centro</div></div></div>
<div class="medium-4 columns"><div class="panel">3</div><div class="panel">4</div></div>
</div>
Shoaib Iqbal about 3 years ago

Hi, Try this code, if you have 16 columns you can replace small-2 and others to small-4 etc.

<div class="row text-center">
  <div class="small-2 columns medium-2 medium-push-10">
    4b
  </div>
  <div class="small-8 medium-8 medium-pull-2 columns">
    8
  </div>
  <div class="small-2 medium-2 medium-pull-2 columns">
    4a
  </div>
</div>

see here http://codepen.io/shoaibik/pen/NPeLyv

Rafi Benkual about 3 years ago

I iterated on what Shoaib made http://codepen.io/rafibomb/pen/ZYwbdJ

If you want 4b to be first in code and last displayed like that, you'd need to use visibility classes.