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:
0 para resposta № 1Você 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>