Empurrar e puxar na grade de fundação - zurb-foundation, zurb-foundation-5

Eu preciso de um layout na base que no meio e acima é:

[8][4A]
[4B]

E no pequeno:

[4A]
[8]
[4B]

Estou perto de conseguir isso, mas quando eu tenho muito conteúdo no meu bloco de 8, 4B é empurrado para baixo a página, eu preciso para o site abaixo de 4A

Aqui é um codepen

Respostas:

Você pode empilhá-los nesta ordem ou ele entrará em conflito com seu modelo? Parece corrigir a lacuna

<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 você quiser 4b estar abaixo do column medium-8 em seguida, adicione um .clearfix depois disso

  <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>