/ / Empujar y tirar en la rejilla de la base - zurb-foundation, zurb-foundation-5

Empujar y tirar en la rejilla de la base - zurb-foundation, zurb-foundation-5

Necesito un diseño en la base que en medio y arriba es:

[8][4A]
[4B]

Y en pequeño:

[4A]
[8]
[4B]

Estoy a punto de lograr esto, pero cuando tengo mucho contenido en mi bloque 8, 4B es empujado hacia abajo en la página, lo necesito en el sitio justo debajo de 4A

Aquí está un codepen

Respuestas

0 para la respuesta № 1

¿Puedes apilarlos en este orden o entrarán en conflicto con tu plantilla? Parece arreglar la brecha

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

Si tu quieres 4b estar debajo de la column medium-8 luego agrega un .clearfix después de

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