javascript - Zurb Foundation 4 を使用してグリッド行を埋めるにはどうすればよいですか?

Question

次のレイアウトを達成したい、

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

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

「B」がモバイル バージョンの新しい行にジャンプしてスペースの半分を占めるようにすることはできますが、「C」と共有することはできません。次のようになります。

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

目的のレイアウトを実現するにはどうすればよいですか? Zurb Foundation 4 フレームワークを使用しています。

マークアップは次のとおりです

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