title: Bootstrap `.hidden-xs` does not hide div
body: <p>I am trying to create a site, that will hide an extended section for users on a small screen using Bootstrap's <code>.hidden-xs</code> To test it, I am using Chrome's mobile emulator, setting it to "iPhone 5" (pretty small). When I refresh  the page, however, it does not hide the div. Am I using the class wrong?</p>
  
  <p><em>HTML</em></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, intial-scale=1"&gt;
          &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"&gt;
          &lt;link rel="stylesheet" type="text/css" href="static/css/todo.css"&gt;
          &lt;title&gt;TODO&lt;/title&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div class="container-fluid"&gt;
              &lt;header&gt;
  
              &lt;/header&gt;
              &lt;div id="left"&gt;
                  &lt;div class="test"&gt;&lt;/div&gt;
                  &lt;div class="test"&gt;&lt;/div&gt;
                  &lt;div class="test"&gt;&lt;/div&gt;
                  &lt;div class="test"&gt;&lt;/div&gt;
                  &lt;div class="test"&gt;&lt;/div&gt;
                  &lt;div class="test"&gt;&lt;/div&gt;
                  &lt;div class="test"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="main" class="hidden-xs"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><em>CSS</em></p>
  
  <pre><code>/* CSS Document */
  
  body {
      margin: 0;
  }
  
  header {
      height: 10em;
      width: 100%;
      border-bottom: 1px solid #000000;
  }
  
  #left {
      float: left;
      height: 80%;
      max-width: 100%;
      width: 20%;
      border-right: 1px solid black;
      overflow: scroll;
  }
  
  #main {
      float: left;
      width: 80%;
      height: 100%;
  }
  
  .test {
      height: 10em;
      background-color: #eeeeee;
      width: 100%
  }
  
  .test:hover {
      background-color: #dddddd;
  }
  </code></pre>
  
  <p>here is a JSFiddle demonstrating my code: <a href="https://jsfiddle.net/James_Parsons/jwqdbn61/" rel="noreferrer">https://jsfiddle.net/James_Parsons/jwqdbn61/</a></p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Apparently an iPhone 5 is not small enough. If I use both <code>.hidden-xs</code> and <code>.hidden-sm</code> will it be hidden on all small devices?</p>