/ / Grille de fondation Push-and-Pull - zurb-foundation, zurb-foundation-5

Grille de fondation Push-and-Pull - zurb-foundation, zurb-foundation-5

J'ai besoin d'une mise en page qui, sur le moyen et le supérieur, est:

[8][4A]
[4B]

Et sur petit:

[4A]
[8]
[4B]

Je suis sur le point d’atteindre cet objectif, mais lorsque j’ai beaucoup de contenu dans mon bloc 8, 4B est poussé vers le bas de la page, j’ai besoin de le placer sur le site juste en dessous de 4A.

Voici un codepen

Réponses:

0 pour la réponse № 1

Pouvez-vous les empiler dans cet ordre ou il sera confondu avec votre modèle? Semble combler l'écart

<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 veux 4b être en dessous de la column medium-8 puis ajoutez un .clearfix après ça

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