Spingi e tira in Foundation Grid - zurb-foundation, zurb-foundation-5

Ho bisogno di un layout in fondazione che su media e sopra sia:

[8][4A]
[4B]

E su piccolo:

[4A]
[8]
[4B]

Sono vicino a raggiungere questo obiettivo, ma quando ho un sacco di contenuti nel mio blocco da 8, 4B è spostato in basso nella pagina, ho bisogno di farlo al di sotto di 4A

Ecco un codepen

risposte:

Puoi raggrupparli in questo ordine o sarà in conflitto con il tuo modello? Sembra risolvere il divario

<div class="row text-center">
<div class="small-12 columns medium-4 medium-push-8 ">
<div class="panel">        4A</div>
<div class="panel">        4B</div>
</div>

<div class="small-12 medium-8 medium-pull-4 columns">
<div class="panel">
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>

Se vuoi 4b essere sotto il column medium-8 quindi aggiungere un .clearfix dopo ciò

  <div class="small-12 medium-8 medium-pull-4 columns">
<div class="panel">
<p>Content</p>
<p>Content</p>
</div>
</div>

<div class="clearfix"></div> // here clear floating position

<div class="small-12 columns medium-4 medium ">
<div class="panel">4A</div>
</div>