如何配置以將基礎中的網格分組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> 

它顯示爲兩行兩列的表。

但是，當我縮小窗口時，我看到兩個標題一起上下。我希望將第二列的第一個單元格顯示在第一列的第一個單元格下。如何更改代碼？也許一個嵌套網格將工作，但我仍然喜歡聽到你們。

img1 http://img6.imageshack.us/img6/6188/lpk.png

目前狹窄的效果顯示這樣的，這不是我想要的。 img2 http://img96.imageshack.us/img96/1217/pvb.png

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> 

這將使他們堆疊在小視口和並排在較大的。