Html 推特引导-折叠引导3时将对象移动到导航栏

我有一个topnavbar，当网站加载到移动设备上时，它会消失，但我希望topnavbar上的内容出现在折叠的主导航上

我怎样才能做到这一点，或者这是可能的，或者我必须专门为折叠菜单创建一个类吗？

---

提前谢谢你

我有时会做以下几件事：

1为大型设备创建顶部菜单容器

2在小型设备的折叠容器中创建相同的菜单

3使用css和@media在两个列表之间切换

<header>
    <div class="container">

    <!-- Top menu for not mobile devices -->  
    <div id="top-menu" class="clearfix">
         <ul class="nav navbar-nav">
             <li>
                 <a href="#">
                     TopItem1
                 </a>
             </li>
             <li>
                  <a href="#">
                     TopItem2
                  </a>
             </li>
          </ul>
      </div>

      <!-- Navigation bar -->
      <div class="navbar navbar-default">

          <div class="navbar-header">

              <!-- Toggle menu -->
              <button class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" type="button">
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
                  <span class="icon-bar"></span>
              </button>

              <!-- Logo -->
              <a class="navbar-brand" href="/nl/">

              </a>
            </div>
            <div class="navbar-collapse collapse">

               <ul class="nav navbar-nav navbar-right">
                   <li>
                       <a href="#">
                           Item1
                       </a>
                    </li>
                    <li>
                        <a href="#">
                            Item2
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            Item2
                        </a>
                    </li>
                </ul>

                <!-- Same top menu links for small devices -->
                <ul class="nav navbar-nav navbar-right" id="top-responsive">
                    <li>
                        <a href="#">
                            TopItem1
                        </a>
                    </li>
                    <li>
                         <a href="#">
                            TopItem2
                         </a>
                    </li>
                 </ul>

            </div>
        </div>

    </div>
</header>

使用@media for小型设备：

@media (max-width: 767px) 
{
    #top-responsive {
        display: block;
    }

    #top-menu {
        display: none;
    }
}

Jsfiddle：

编辑：

正如Vicente所说，Bootstrap提供的实用程序类与我做的事情相同。

---

您可以在Bootstrap网站上找到关于它的详细信息：

您还可以使用Bootstrap中提供的响应实用程序类。看：@vicente你说得对，我会补充我的答案，谢谢你的提示！非常感谢你！这正是我想要的@vicente您的解决方案也非常好，这样我就可以摆脱一些自定义类，它们会隐藏topbar。

@media (max-width: 767px) 
{
    #top-responsive {
        display: block;
    }

    #top-menu {
        display: none;
    }
}