Zurb Foundation 5：网格列堆叠答案

【问题标题】：Zurb Foundation 5: Grid Column StackingZurb Foundation 5：网格列堆叠
【发布时间】：2014-12-05 19:03:25
【问题描述】：

我是 Foundation 新手，我只知道如何使用网格的基本概念。

当在移动/小屏幕上查看时，我有这 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>

【问题讨论】：

标签： html grid zurb-foundation zurb-foundation-5

【解决方案1】：

此网格系统适用于大屏幕和小屏幕

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

【讨论】：

【解决方案2】：

试试这个（块将在小屏幕上以正确的顺序流动）：

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

【讨论】：