如何使用Zurb Foundation 4填充網格行？

Question

我想acheive以下佈局，

Desktop: 
[----A---][-B-] 
[-C-][-D-][-E-] 

Mobile: 
[----- A -----] 
[---B--][--C--] 
[---D--][--E--] 

我可以得到「B」跳下到一個新的行中的移動版本，並採取了一半的空間，但我不能讓它分享與'C' - 這裏發生了什麼：

[----- A -----] 
     [---B--] 
[--C--][---D--] 
     [---E--] 

我該如何實現所需的佈局？我正在使用Zurb Foundation 4框架。

的標記如下：在一個.row

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

<div class="row"> 
    <div class="large-4 small-6 columns"> 
    C 
    </div> 
    <div class="large-4 small-6 columns"> 
    D 
    </div> 
    <div class="large-4 small-6 columns"> 
    E 
    </div> 
</div> 

Answer 1

嘛，據我看到，您可以使用下面的標記你的目的（fiddle）：

<div class="row"> 
    <div class="large-8 small-12 columns"> 
    A 
    </div> 
    <div class="large-4 small-6 columns"> 
    B 
    </div> 
    <div class="large-4 small-6 columns"> 
    C 
    </div> 
    <div class="large-4 small-6 columns"> 
    D 
    </div> 
    <div class="large-4 small-6 columns"> 
    E 
    </div> 
</div> 

Answer 2

將所有的東西。

Here's a demo。