title: Moving columns with responsive Zurb Foundation
body: <p>What is the best way to move columns when the size is small?</p>
  
  <p>Here is the example:</p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div class="two columns"&gt;...&lt;/div&gt;
      &lt;div class="seven columns"&gt;...&lt;/div&gt;
      &lt;div class="three columns"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want the two column to move below the seven columns when the screen size is small. The only way I figured out to do it is to do something like:</p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div class="two columns hide-for-small"&gt;...&lt;/div&gt;
      &lt;div class="seven columns"&gt;...&lt;/div&gt;
      &lt;div class="two columns show-for-small"&gt;...&lt;/div&gt;
      &lt;div class="three columns"&gt;...&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But it seems kind of messy and can be confusing. Is there a better way?</p>