Jquery 引导多导航条

我必须在Bootstrap中构建一个响应性双栏标题-基本上我有两个导航-如下所示-第一个导航是一个副导航，但由于设计原因，它位于主导航上方的较小案例中-我的问题是我想用移动按钮折叠和打开-但我需要颠倒顺序-以便主导航（第二个列表-从home开始）排在第一位-这是可能的-还是需要jquery脚本

<nav class="navbar navbar-inverse navbar-fixed-top navbar-expanded">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navBr">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">
                <img src="assets/img/logo.png" class="img-responsive" alt="Motor Depot Logo">
            </a>
        </div>
        <!-- Nav Bar One-->
            <div class="collapse navbar-collapse" id="nav">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a class="page-scroll" href="#page-top"></a>
                </li>
                <li>
                    <a class="page-scroll" href="#about">About</a>
                </li>
                <li>
                    <a class="page-scroll" href="#careers">Careers</a>
                </li>
                <li>
                    <a class="page-scroll" href="#news">News</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Contact</a>
                </li>
                <li>
                    <a class="page-scroll" href="#chat">Live Chat</a>
                </li>
                 <li>
                    <a class="page-scroll" href="#phone">Phone</a>
                </li>
            </ul>
            </div>
        <!-- Nav Bar Two-->
            <div class="collapse navbar-collapse" id="navBr">
            <ul class="nav navbar-nav navbar-right">

                <li>
                    <a class="page-scroll" href="#home">Home</a>
                </li>
                <li>
                    <a class="page-scroll" href="#showrooms">Showrooms</a>
                </li>
                <li>
                    <a class="page-scroll" href="#search">Search</a>
                </li>
                <li>
                    <a class="page-scroll" href="#serviceMot">Service &amp; MOT</a>
                </li>
                <li>
                    <a class="page-scroll" href="#smartDrive">SmartDrive</a>
                </li>
                 <li>
                    <a class="page-scroll" href="#value">Value Your Car</a>
                </li>
                <li>
                    <a class="page-scroll" href="#contact">Offers</a>
                </li>
            </ul>
            </div>


        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container -->
</nav>

切换导航

将两个

.nav

元素按您希望它们在菜单未折叠时显示的顺序添加到可折叠菜单元素中

然后使用

show.bs.collpase

事件将可折叠菜单的

display

属性更改为

flex

，并使用第一个

.nav

元素上的

order

属性将其置于第二个

.nav

元素之后

这里有一个例子，你一定会明白的

$（'#navBr'）.on（'show.bs.collapse'，function（）{
$（this.css）({
显示：“flex”，
flexDirection:'列'，
flexWrap:“nowrap”
});
$（this.find（'.nav:first'）.css({
订单：2，
});
});
//确保在关闭#navBr后将其隐藏
//并重置显示属性。
$（'#navBr'）.on（'hidden.bs.collapse'，function（）{
$（this.css）({
显示：“无”，
});
})；

切换导航

等等，所以在桌面视图中，1堆叠在2之上，但在移动设备中，您希望2堆叠在1之上？是的-看到设计会更有意义-子导航在右上角较小-主导航在下方-但在移动设备上，按堆叠顺序没有意义-我认为解决此问题的唯一方法是将其堆叠在移动设备上，绝对没有意义在桌面上显示上面的子导航？我以前从未尝试过，但如果您将每个导航封装在col-12中会怎么样？使用引导，您可以交换列顺序。