How do I fill a grid row using Zurb Foundation 4?

Question

I want to acheive the following layout,

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

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

I can get 'B' to jump down to a new row in the mobile version and take up half the space, but I can't get it to share with 'C' - here is what happens:

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

How can I acheive the desired layout? I am using Zurb Foundation 4 framework.

The markup is as follows

<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

Well as far as I see you can use following markup for your purpose ( 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

Put everything in one .row .

Here's a demo .