Hide bootstrap for portrait but show for landscape

Question

Let's say I have ul with 3 li elements. How to hide the last two li elements in portrait mode and show all 3 when you are in landscape mode? With disabling CSS and Bootstrap 3.

<div class="header-box pull-left">
  <ul>
   <li class="usp">
     <a href="link" title="usp">
       <span class="usp-text">usp</span>
     </a>
   </li>
   <li class="usp hide-for-xs">
     <a href="link" title="usp">
       <span class="usp-text">usp</span>
     </a>
   </li>
   <li class="usp hide-for-xs">
     <a href="link" title="usp">
       <span class="usp-text">usp</span>
     </a>
   </li>
  </ul>
</div>

I thought something like:

.show-for-landscape{
display:block!important;
}

But how does this work with media queries? What would be a good screen size setting, etc.

Any suggestions are more than welcome.

Answer 1

Most likely, you are lucky with a media query focused on the orientation of the device, for example:

@media screen and (max-device-width: 1000px) and (orientation:landscape){
   /*...your special rules for landscape...*/ 
}

, , iOS Android Galaxy Note S4 . , , , - , max-device-width, 1000 , .

- ( Bootstrap). :

@media screen and (min-aspect-ratio: 13/9){ } // landscape and 
@media screen and (max-aspect-ratio: 13/9){ } // portrait.