title: Zurb Foundation small columns do not flow
body: <p>I'm working with Zurb Foundation 4.3 and am having trouble wrapping my head around Zurb's small and large column classes.  In the code sample below using just large classes for columns, the 2nd column will get repositioned below the first column when the UI width changes.  This is nice because it keeps the UI content clean</p>
  
  <pre><code>        &lt;div class="row"&gt;
          &lt;div class="large-8 columns rounded"&gt;
              Bubbles
          &lt;/div&gt;
          &lt;div class="large-4 columns rounded"&gt;
              Yadda Yadda Yadda
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>However, if I add small classes to the columns, the 2nd column doesn't get repositioned resulting in a messy UI.</p>
  
  <pre><code>        &lt;div class="row"&gt;
          &lt;div class="small-4 large-8 columns rounded"&gt;
              Bubbles
          &lt;/div&gt;
          &lt;div class="small-8 large-4 columns rounded"&gt;
              Yadda Yadda Yadda
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I like the ability to be able to change the column widths of the content as the overall page changes widths.  However, as I drag the page from wide to narrow, the content doesn't reposition if I use the small classes.  What am I missing?  Thanks.</p>