将项添加到xs断点上的可折叠菜单

Question

这是我的可折叠菜单：

<div class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="active"><a href="#"> A </a></li>
        <li><a href="#contact"> B </a></li>
        <li><a href="#contact"> C </a></li>
     </ul>

     <ul class="nav navbar-nav navbar-right">
         <li class="active"><a href="./"> <i class= 'fa fa-sign-out'></i> Logout </a> </li>
     </ul>  
</div>

它有三个可折叠的项目，A，B和C.我怎么能这样做，以便在移动断点时，移动下拉菜单也会显示：

<li><a href="#contact"> D </a></li>
<li><a href="#contact"> E </a></li>
<li><a href="#contact"> F </a></li>

我试过这样做：

<li class = 'hidden-sm'><a href="#contact"> D </a></li>

它工作正常，但是当我在xs断点处打开菜单并扩展到＆gt; = sm时，导航栏就坏了。移动导航并没有消失。它保持移动和响应，并打破了布局。