title: CSS Media Query not working with Bootstrap?
body: <p>So I have created a navigation menu using bootstrap, but when I try to hide a div inside the nav header based on media query, it won't work.</p>
  
  <p>The div in concern has the class <code>.hide-on-desktop</code>.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;nav class="navbar navbar-default navbar-static-top"&gt;
  &lt;div class="container"&gt;
      &lt;div class="navbar-header"&gt;
          &lt;button type="button" data-target="#navbarCollapse5" data-toggle="collapse" class="navbar-toggle cls1"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
          &lt;div class="cls2"&gt;
              &lt;i class="fa fa-facebook" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-youtube-play" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-twitter" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-google-plus" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-pinterest-p" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-instagram" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-heart" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-tumblr" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-soundcloud" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-vimeo-square" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-linkedin" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i class="fa fa-rss" aria-hidden="true"&gt;&lt;/i&gt;
              &lt;div class="hide-on-desktop"&gt;
                  This sentence should only show on smaller devices.
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="navbarCollapse5" class="collapse navbar-collapse"&gt;
          &lt;ul class="nav navbar-nav"&gt;
          &lt;/ul&gt;
          &lt;ul class="nav navbar-nav navbar-right"&gt;
              &lt;form class="form1"&gt;
                  &lt;input type="text" name="search" placeholder="Search Text Here..."&gt;
                  &lt;button&gt;&lt;i class="fa fa-search" aria-hidden="true"&gt;&lt;/i&gt;&lt;/button&gt;
              &lt;/form&gt;
  
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>header .fa {
    color: grey;
  }
  
  header {
      background-color: #000;
  }
  
  @media (min-width: 200px) {
      .cls1 {
          float: left;
      }
      .cls2 {
          float: right;
      }
  }
  
  @media (min-width: 1200px) {
      .hide-on-desktop {
          visibility: hidden;
      }
  }
  </code></pre>