html - 如何配置在基础 4 中对网格进行分组

Question

我正在使用 Foundation 4 来网格化发票页面。这是我的代码：

<div class="row grid">
    <div class="large-6 columns">
        <span>Ship To</span>
    </div>
    <div class="large-6 columns">
        <span>Order Information</span>
    </div>
</div>
<div class="row">
    <div class="large-6 columns">
        <span>Content Of ShipTo</span>
    </div>
    <div class="large-6 columns">
        <span>Content Of Order Information</span>
    </div>
</div>

它显示为具有两行的两列表。

但是，当我缩小窗口时，我看到两个标题一起上下。我希望第二列的第一个单元格显示在第一列的第一个单元格下。如何更改代码？也许巢网格会起作用，但我仍然想听听你们的意见。

目前这样的窄效果展示，这不是我想要的。

Answer 1

您应该将标记更改为包含相关内容的组标题。而不是你所拥有的，尝试这样的事情：

<div class="large-6 small-12 columns">
    <div>
        <span>Ship To</span>
    </div>
    <div>
        <span>Order Information</span>
    </div>
</div>
<div class="large-6 small-12 columns">
    <div>
        <span>Content Of ShipTo</span>
    </div>
    <div>
        <span>Content Of Order Information</span>
    </div>
</div>

这将使它们堆叠在小视口中，并在较大的视口中并排放置。