title: Zurb Foundation - Remove column for medium screens
body: <p>I have a site prototype in Zurb Foundation 3, so far I have the desktop version and now I am adjusting it to be responsible on tablets and mobiles.</p>
  
  <p>What I am strugling with is this: I have some columns with content in a row, and I want to remove some of the columns for medium and small resolutions. But I want the other columns to stretch to the rest of the page width. How do I do this correctly ? </p>
  
  <p>I am using</p>
  
  <pre><code>class="hide-for-medium-down"
  </code></pre>
  
  <p>to hide the element, but how do I wrap the content so it stretches when some of the elements is hidden ? </p>
  
  <p>I found two ways but none of them works:
  1) I make it as standard row-columns, eg:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="three columns"&gt;...&lt;/div&gt;
      &lt;div class="three columns"&gt;...&lt;/div&gt;
      &lt;div class="three columns hide-for-medium-down"&gt;...&lt;/div&gt;
      &lt;div class="three columns"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but in this case the third column will just stay as empty space.</p>
  
  <p>2) I can make it using block-grid like this:</p>
  
  <pre><code>&lt;ul class="block-grid four-up"&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li class="hide-for-medium-down"&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>but this time the 4th column just moves left to the position of 3th and the fourth space will stay empty again.</p>
  
  <p>Closest I got was using the mobile-x-up class to adjust the grid to have lesser columns for mobiles - this way:</p>
  
  <pre><code>&lt;ul class="block-grid four-up mobile-three-up"&gt;
      &lt;li&gt;1&lt;/li&gt;
      &lt;li&gt;2&lt;/li&gt;
      &lt;li class="hide-for-medium-down"&gt;3&lt;/li&gt;
      &lt;li&gt;4&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Unfortunatelly, this only works for mobiles, but I am unable to use this also for tablets on medium resolution as there is no equivalent for this.</p>
  
  <p>So overall my question is: what is the best way to solve this ? And what is the best way to hide elements on smaller screens while still keeping the grid ? Is it even possible to remove elements from grid on medium screens while still keeping the grid working ?</p>