Bootstrap/Foundation stacking rows/columns
<p>I'm trying to achieve very simple two row stacking but can't seem to find the solution. I've tried Bootstrap and Foundation for solutions. 
As you can see in the photos I have 2 rows, each with 3 columns. When the screen size is medium/small i need the columns to be in 2 parts, Heading 4 should be next to Heading 3 and Heading5 underneath Heading3. Heading6 follows afterwords.</p>

<p>I thank everyone greatly in advance!</p>

<p><a href="http://i.stack.imgur.com/hqFGy.png" rel="nofollow">how it is</a></p>

<p><a href="http://i.stack.imgur.com/W58Yz.png" rel="nofollow">what I'm trying to achieve</a></p>

<p>Bootstrap code
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="row&gt;
    &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;h2&gt;Heading1&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;h2&gt;Heading2&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;h2&gt;Heading3&lt;/h2&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
    &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;h2&gt;Heading4&lt;/h2&gt;    
    &lt;/div&gt;
    &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;h2&gt;Heading5&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="col-md-4 col-sm-6"&gt;
        &lt;h2&gt;Heading6&lt;/h2&gt;
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Foundation code</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;div class="row"&gt;
  &lt;div class="large-4 medium-6 columns"&gt;
    &lt;div class="primary callout"&gt;
      &lt;p&gt;Four columns&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="large-4 medium-6 columns"&gt;
    &lt;div class="primary callout"&gt;
      &lt;p&gt;Four columns&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="large-4 medium-6 end columns"&gt;
    &lt;div class="primary callout"&gt;
      &lt;p&gt;Four columns&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;div class="row"&gt;
  &lt;div class="large-4 medium-6 columns"&gt;
    &lt;div class="primary callout"&gt;
      &lt;p&gt;Four columns&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="large-4 medium-6 columns"&gt;
    &lt;div class="primary callout"&gt;
      &lt;p&gt;Four columns&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="large-4 medium-6 columns"&gt;
    &lt;div class="primary callout"&gt;
      &lt;p&gt;Four columns&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>