html - Zurb Foundation 5: グリッド列のスタッキング

Question

私は財団に不慣れで、グリッドの使用方法に関する基本的なアイデアしかありません。

モバイル/小さな画面で表示する場合、これらの 3 つの列を積み重ねる必要があります (「モバイル」画像を参照)。

大きな画面では次のようになります。

これが私の現在のコードです。それは私が望んでいたものではなく、混乱し始めています。

<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

これを試してください (小さな画面ではブロックが正しい順序で流れます):

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