ブートストラップ/ jqueryを使用してタブレットポートレートモードでリンクを変更する方法

Question

タブレットポートレートモードでしかリンクが表示されず、最初の2つのリンクが表示され、次にメニューアイコンを表示する必要がありますそのリンクの残りの部分がドロップダウン内に表示されます。

HTML：

<div class="container"> 
<ul> 
    <li class="hidden-sm"> link1 </li> 
<li class="hidden-sm"> link2 </li> 
<li class="hidden-sm"> link3 </li> 
<li class="hidden-sm"> link4 </li> 
<li class="hidden-sm"> link5 </li> 
     <li class="dropdown hidden-lg hidden-md"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Action</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li><a href="#">Separated link</a></li> 
    </ul> 
    </li> 
</ul> 
</div> 

Answer 1

jqueryのための必要はありません。プレーンなCSSだけで十分です。

@media screen and (orientation: portrait) { 
    // CSS that should only be applied in portrait mode. 
    // Hide your links here 
}