title: media queries with bootstrap not working
body: <p>I wanted to have large pictures be hidden for mobile devices. Looking <a href="http://ageekandhisblog.com/css-how-to-easily-hide-content-on-only-mobile-or-only-desktop/" rel="nofollow">at this site</a> I put the following styles in my css:</p>
  
  <pre><code>//medium+ screen sizes
  @media (min-width:992px) {
      .desktop {
              display:block !important;
      }
  }
  
  //small screen sizes
  @media (max-width:991px) {
      .mobile {
              display:block !important;
      }
  
      .desktop {
              display:none !important;
      }
  }
  </code></pre>
  
  <p>Then I apply the class in my html like this:</p>
  
  <pre><code>&lt;img class="desktop" src="img/test/test.jpg" 
      alt="jhkjhjk" height="600" width="900"&gt;
  </code></pre>
  
  <p>But when I shrink my browser window the image remains there. Have I missed something?</p>