title: Bootstrap visible and hidden classes not working properly
body: <p>I tried to use the Bootstrap <code>visible</code> and <code>hidden</code> classes to create content only visible on mobile/desktop. I noticed the classes weren't working properly (and I have noticed a lot of people had this problem and solved it this way) so I created a mobile stylesheet to set which of the divs to show on mobile.</p>
  
  <p>This is my current code:</p>
  
  <pre><code>&lt;div class="containerdiv hidden-sm hidden-xs visible-md visible-lg"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 logo"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="mobile"&gt;
    test
  &lt;/div&gt;
  </code></pre>
  
  <p>Now the <code>.mobile</code> should be visible on mobile screens, 900px width, and smaller. I used the Bootstrap classes for the other div, <code>.containerdiv</code>, and that works so far, but only when I added a value for <code>hidden-xs</code> in my own mobile CSS sheet, like so;</p>
  
  <pre><code>.hidden-xs {
    display:none !important;
  }
  .mobile {
    display:block !important;
  }
  </code></pre>
  
  <p>The <code>.mobile</code> div should now show up on screens 900px or smaller but it still doesn't. I'm not sure why it doesn't, <code>display:block</code> is the right thing to use right? Adding <code>visible-xs</code> and <code>visible-sm</code> does nothing.</p>
  
  <p>What is the proper way to do this and why is my version not working?</p>