twitter bootstrap-折叠的bootstrap 3时将对象移动到导航栏

我有时会执行以下操作：

1）top-menu为大型设备创建容器

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

3）使用CSS和@media在2个列表之间切换

<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>

CSS：

标准CSS样式：

#top-responsive {
    display: none;
}

#top-menu {
    display: block;
}

随着@media用于小型设备：

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

    #top-menu {
        display: none;
    }
}

Jsfiddle：http : //jsfiddle.net/VDesign/qyosv002/

编辑：

就像Vicente所说的那样，Bootstrap提供的实用程序类执行与我相同的操作。您可以在Bootstrap网站上找到有关此内容的情报：http : //getbootstrap.com/css/#sensitive-utilities