title: Bootstrap 3 breakpoints and media queries
body: <p>On the <a href="https://getbootstrap.com/docs/3.4/css/#grid-media-queries" rel="noreferrer">Bootstrap 3 media queries documentation</a> it says:</p>
  
  <blockquote>
    <p>We use the following media queries in our Less files to create the key breakpoints in our grid system.</p>
    
    <p>Extra small devices (phones, less than 768px):
    No media query since this is the default in Bootstrap</p>
    
    <p>Small devices (tablets, 768px and up):
    <code>@media (min-width: @screen-sm-min) { ... }</code></p>
    
    <p>Medium devices (desktops, 992px and up):
    <code>@media (min-width: @screen-md-min) { ... }</code></p>
    
    <p>Large devices (large desktops, 1200px and up):
    <code>@media (min-width: @screen-lg-min) { ... }</code></p>
  </blockquote>
  
  <p>Are we supposed to be able to use the <code>@screen-sm</code>, <code>@screen-md</code>, and <code>@screen-lg</code> names in our media queries as well? Because it doesn't work for me. I have to use pixel measurements such as <code>@media (min-width: 768px) {...}</code> before it will work. Am I doing something wrong?</p>
  
  <p><s>Also, is the reference to 480px for extra small devices a typo? Shouldn't that say up to 767px?</s> (<em>since removed from the documentation</em>)</p>