title: Bootstrap 3 XS - Why threshold is high and how to change?
body: <p>I've used bootstrap for awhile now, and for the life of me I cannot remember the <code>xs</code> coming into play at <code>767px</code>. I'm using <code>Boostrap v3, LESS</code>, and cannot find where to change the threshold for the <code>hidden-xs</code> class. I did a project-wide search, and only the variables are popping up in the Find Results.</p>
  
  <p>file: responsive-utilities.less</p>
  
  <p>line: 134</p>
  
  <pre><code>.hidden-xs {
    @media (max-width: @screen-xs-max) {
       .responsive-invisibility();
    }
  }
  </code></pre>
  
  <p>When I inspect element in chrome the variable, <code>@screen-xs-max</code> is being set at <code>767px</code></p>
  
  <pre><code>@media (max-width: 767px)
    .hidden-xs {
       display: none !important;
    }
  </code></pre>
  
  <p>I have <code>disable cache</code> on in chrome as well. I attempted to change the <code>@screen-xs-max</code> variable by removing the variable all together and putting a hard number, but that didn't change it either.</p>
  
  <p>I've also looked at this website, <a href="http://getbootstrap.com/customize/#media-queries-breakpoints" rel="nofollow">Customize and download Bootstrap</a>, and that confused me even more b/c I use <code>col-XXX-##</code> and <code>hidden-XX</code>, not the <code>@screen-xs</code>, which is in the <code>Media queries breakpoints</code> section. And not only that, but the <code>xs</code> is set to <code>480px</code>.</p>
  
  <p>Appreciate it.</p>
  
  <hr>
  
  <p><strong>Addition:</strong> </p>
  
  <p>I am compiling LESS using less.js as well.</p>
  
  <p>Maybe my main question would be - how do I increase the <code>sm</code> threshold, and reduce the <code>xs</code> threshold - as in have the <code>xs</code> at a lower pixel setting, like <code>520px</code>?</p>