<p dir="auto">Hi all,</p>
<p dir="auto">First off, thanks for all your hard work on this project. It kicks ass.</p>
<p dir="auto">This is my first time using bootstrap more extensively on a larger project, and I'm confused as to why the screen-xs breakpoint has been deprecated, and the xs breakpoint has been defined as everything less than 768px.</p>
<p dir="auto">I was taking a look at <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="28699886" data-permission-text="Title is private" data-url="https://github.com/twbs/bootstrap/issues/12913" data-hovercard-type="issue" data-hovercard-url="/twbs/bootstrap/issues/12913/hovercard" href="https://github.com/twbs/bootstrap/issues/12913">#12913</a>, and I don't know the history here, but at first glance it looks like the underlying problem was that there wasn't a way to specify default "mobile-first" behavior, since the xs breakpoint was between 480px and 767px. There was nothing for &lt; 480px, so the xs breakpoint was changed to be just &lt; 768px.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://camo.githubusercontent.com/7e3274f998bb3e757af3b044308a5eead5ac2a62678fa4f7549cc155385b509e/687474703a2f2f636c2e6c792f696d6167652f3279336e326e3065316c31432f496d616765253230323031342d30392d3031253230617425323031322e34352e3130253230504d2e706e67"><img src="https://camo.githubusercontent.com/7e3274f998bb3e757af3b044308a5eead5ac2a62678fa4f7549cc155385b509e/687474703a2f2f636c2e6c792f696d6167652f3279336e326e3065316c31432f496d616765253230323031342d30392d3031253230617425323031322e34352e3130253230504d2e706e67" alt="Image of Yaktocat" data-canonical-src="http://cl.ly/image/2y3n2n0e1l1C/Image%202014-09-01%20at%2012.45.10%20PM.png" style="max-width: 100%;"></a></p>
<p dir="auto">But I have run into several cases where I'd love to use the xs breakpoint. Basically, I'd like to say .make-xs-column(6), and have it wrap the columns when &lt; 480 but go side by side at 480 and up.</p>
<p dir="auto">Again, I don't know the history here, but it seems to me a better solution would be to add another set of mixins and helper classes to specify the default "mobile-first" behavior. Something like:</p>
<div class="highlight highlight-source-css-less notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content=".my-row {
  .make-row;
}

.my-row-item {
  .make-column(6);    // Default is 6 cols
  .make-xs-column(3); // 3 cols at &gt;= 480px
  .make-md-column(2); // 2 cols at &gt;= 768px
}"><pre class="notranslate"><span class="pl-e">.my-row</span> {
  <span class="pl-e">.make-row</span>;
}

<span class="pl-e">.my-row-item</span> {
  <span class="pl-e">.make-column</span>(<span class="pl-c1">6</span>);    <span class="pl-c"><span class="pl-c">//</span> Default is 6 cols</span>
  <span class="pl-e">.make-xs-column</span>(<span class="pl-c1">3</span>); <span class="pl-c"><span class="pl-c">//</span> 3 cols at &gt;= 480px</span>
  <span class="pl-e">.make-md-column</span>(<span class="pl-c1">2</span>); <span class="pl-c"><span class="pl-c">//</span> 2 cols at &gt;= 768px</span>
}</pre></div>
<p dir="auto">Would it be crazy to make the xs breakpoint act like the sm, md, and lg breakpoints (i.e. xs &gt;= 480px) and add another set of helpers (e.g. <code class="notranslate">.col-6</code>, <code class="notranslate">.visible-block</code>, <code class="notranslate">.make-column(8)</code>) to handle the &gt;= 0px default behavior?</p>
<p dir="auto">Thanks</p>
<p dir="auto">The smallest grid column supported at the moment is .col-xs- (&lt;768px), which seems like a big range.</p>
<p dir="auto">Would it be advisable to have:<br>
.col-xs- (&gt;480px and &lt;768px)<br>
.col-tn- (&lt;480px)</p>
<p dir="auto">Reason being it still seems reasonable to have a 2 column grid on 768px (240px - 384px per column), while 480px have a stacked column.</p>
<p dir="auto">Using the current .col-xs- (&lt;768px) option, putting one stacked column on 768px seems too wide on some cases, and 2 columns on 480px seems ridiculous at times.</p>