title: Bourbon Neat still using 12 columns even when guides show 4 columns
body: <p>I am using Bourbon and Neat in a static Octopress site I am building. I'm using the <code>_grid-settings.scss</code> file with no changes, other than turning on the guides (<code>$visual-grid: true;</code>). In my <code>screen.scss</code> I'm loading grid-settings after Bourbon, but before Neat: </p>
  
  <pre><code>@import "bourbon/bourbon";
  @import "grid-settings";
  @import "neat/neat";
  </code></pre>
  
  <p>Since I'm using the default grid settings small screens should only be 4 columns wide. </p>
  
  <pre><code>$phone-portrait: new-breakpoint(max-width $tiny-screen 4); // 450px
  </code></pre>
  
  <p>When I view the site on a screen that's less than 450px, the visual grid shows 4 columns, but layout is still using 12 columns. I have several places where I'm using 4 column divs in the layout, on mobile these should be full width, since the page is only 4 columns, but they are only a third the width of the page. I can verify that mobile is still using 12 columns by replacing <code>@include span-columns(4)</code> with <code>@include span-columns(12)</code>. The 12 column divs are the only divs that are full width on mobile. </p>
  
  <p><strong>Why isn't Neat using the same number of columns for both the guides and my layout?</strong></p>