title: Neat ignores the grid on mobile
body: <p>I'm using the Neat Grid. Everything is fine on a 12-Grid but on mobile it doesn't work properly.</p>
  
  <p>SCSS:</p>
  
  <pre><code>.how-it-works{
    @include outer-container;
    border: 1px solid green;
  
    &amp;--box{
      border: 1px solid red;
      @include span-columns(4);
    }
  }    
  </code></pre>
  
  <p>Grid Settings</p>
  
  <pre><code>@import "neat-helpers"; // or "../neat/neat-helpers" when not in Rails
  
  // Neat Breakpoints
  $medium-screen: em(640);
  $large-screen: em(860);
  
  $mobile: new-breakpoint(max-width 500px 4);
  $medium-screen-up: new-breakpoint(min-width $medium-screen 4);
  $large-screen-up: new-breakpoint(min-width $large-screen 12);
  
  // Debug
  $visual-grid: true;
  $visual-grid-color: yellow;
  $visual-grid-index: front;
  $visual-grid-opacity: 0.5;
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section class="how-it-works"&gt;
        &lt;h3&gt;How it works&lt;/h3&gt;
        &lt;div class="how-it-works--box"&gt;
          &lt;h6&gt;Head&lt;/h6&gt;
          &lt;p&gt;Text&lt;/p&gt;
          &lt;img alt="Customer ordering german candy." src="images/asian_girl.png"&gt;
        &lt;/div&gt;
        &lt;div class="how-it-works--box"&gt;
          &lt;h6&gt;Head&lt;/h6&gt;
          &lt;p&gt;Text&lt;/p&gt;
          &lt;img alt="The Candy German handpicks high quality candy." src="images/bavarian_man.png"&gt;
        &lt;/div&gt;
        &lt;div class="how-it-works--box"&gt;
          &lt;h6&gt;Head&lt;/h6&gt;
          &lt;p&gt;Text&lt;/p&gt;
          &lt;img alt="Postman with the german candy box." src="images/postman.png"&gt;
        &lt;/div&gt;
      &lt;/section&gt;
  </code></pre>
  
  <p>Desktop:
  <a href="http://cl.ly/image/0r2f0N0l132y" rel="nofollow">http://cl.ly/image/0r2f0N0l132y</a></p>
  
  <p>Mobile:
  <a href="http://cl.ly/image/0j0n3e1K0V07" rel="nofollow">http://cl.ly/image/0j0n3e1K0V07</a></p>
  
  <p>I think the mobile version uses the 12 column grid but display a 4 column grid.</p>