title: Bootstrap hide for portrait but show for landscape
body: <p>Let's say I have an ul with 3 li elements. How do you hide the last two li elements when in portrait mode and show all 3 when you are in landscape mode? With CSS offcourse and Bootstrap 3. </p>
  
  <pre><code>&lt;div class="header-box pull-left"&gt;
    &lt;ul&gt;
     &lt;li class="usp"&gt;
       &lt;a href="link" title="usp"&gt;
         &lt;span class="usp-text"&gt;usp&lt;/span&gt;
       &lt;/a&gt;
     &lt;/li&gt;
     &lt;li class="usp hide-for-xs"&gt;
       &lt;a href="link" title="usp"&gt;
         &lt;span class="usp-text"&gt;usp&lt;/span&gt;
       &lt;/a&gt;
     &lt;/li&gt;
     &lt;li class="usp hide-for-xs"&gt;
       &lt;a href="link" title="usp"&gt;
         &lt;span class="usp-text"&gt;usp&lt;/span&gt;
       &lt;/a&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I thought do something like:</p>
  
  <pre><code>.show-for-landscape{
  display:block!important;
  }
  </code></pre>
  
  <p>But how does this work with media queries? What would be a good setting of screen size etc?</p>
  
  <p>Any suggestions more then welcome</p>