html - zurb - foundation menu

Zurb Foundation 5: Apilamiento de columnas de cuadrícula

Question

Soy nuevo en la fundación y solo tengo la idea básica sobre cómo usar las grillas.

Tengo estas 3 columnas que deben apilarse (ver imagen "móvil") cuando se ven en dispositivos móviles / pantallas pequeñas.

Debería verse algo así cuando en pantallas más grandes:

Aquí está mi código actual. No es exactamente lo que quería, y estoy empezando a confundirme.

<div class="row">
<div class="large-12" style="background-color:#bdc3c7;">
<div class="medium-4 medium-push-8 columns" style="background-color: #1abc9c; border: 1px solid #2c3e50;">
<p>TOP ROW</p>
</div>
<div class="medium-8 medium-pull-4 columns" style="background-color: #e74c3c; border: 1px solid #2c3e50; height: 250px;">
<p>MIDDLE ROW</p>
</div>
<div class="medium-4 columns" style="background-color: #9b59b6; border: 1px solid #2c3e50;">
<p>BOTTOM</p>
</div>
</div>
</div>

Answer 1

Este sistema de cuadrícula funcionará para pantallas grandes y pequeñas

 <div class="row">
<div class="small-12 large-8 columns"></div>
<div class="small-12 large-4 columns"></div>
<div class="small-12 large-4 columns"></div>
</div>

Answer 2

Pruebe esto (los bloques fluirán en el orden correcto en pantallas pequeñas):

<div class="row">
<div class="small-12 large-4 columns right">1</div>
<div class="small-12 large-8 columns">2</div>
<div class="small-12 large-4 columns">3</div>
</div>