Html 当我使用bootstrap 4有两个导航条和一个切换时，如何更改导航条项目的顺序？

我想要两个带有一个开关的导航栏。第一个是徽标、电子邮件图标和搜索框。下面的一个用于其他链接。 在较小的屏幕中使用切换时，我希望顶部导航栏中的项目显示在第二个导航栏的下方。我想这样做：
主页
关于
部门
入学申请
下载
电子邮件
搜索

<nav class="navbar navbar-expand-xl navbar-light"  style="background-color:#FFFFFF;" id="navtop">
   <a class="navbar-brand" href="#"><img src="logo.png"></a> 
      <button class="navbar-toggler" data-toggle="collapse" data-target=".navbars">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse navbars" id="collapse_target1">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item ">
               <a class="nav-link" href=""><i class="far fa-envelope"></i></a>
            </li>
          </ul>
            <form class="form-inline">
               <input class="form-control form-control-sm" type="search" placeholder="Search">
              <button class="btn btn-light btn-sm " type="submit"><i class="fas fa-search" aria-hidden="true"></i></button>
            </form>
        </div>
</nav>

<nav class="navbar navbar-expand-xl sticky-top" style="background-color:#FFFFFF;" id="navbottom" >
   <div class="collapse navbar-collapse navbars" id="collapse_target2" >
       <ul class="navbar-nav mx-auto" >
          <li class="nav-item">
              <a class="nav-link" href="#">Home</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">About Us</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Departments</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Admissions</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Downloads</a>
          </li>
        </ul>
    </div>
</nav>
 

如果您想更改小屏幕和大屏幕之间的项目顺序，并且主菜单项位于第二行，那么使用一个导航栏并使用flex order可能是最简单的方法

我删除了第二个导航栏，并在

导航栏折叠

div下添加了一个容器div。新的div使用

display:flex

进行样式设置（使用引导类），并最初设置为

flex direction:column

（以便菜单项在单个列中向下）和在中间断点处，显示屏切换到

flex direction:row

和

flex wrap:wrap

，以便主菜单将换行到第二行

订单从菜单项开始，然后是电子邮件，然后是搜索。这是导航栏内容在移动设备上显示的顺序，以及屏幕阅读器读取导航栏内容的方式。我使用

order-md-1-2-3

更改了更宽屏幕的顺序

徽标图像使用绝对位置，因此其大小不会影响主菜单的居中。最初的问题没有包含任何关于徽标图像的信息，所以我使用了一个小的placeholder.com图像

居中

在较小的屏幕中，您想交换导航条，对吗？是的，没错。我想更改订单。当用户单击切换时，底部导航栏中的链接必须出现在第一个导航栏中的链接上方。谢谢。您的解决方案非常有效。我也学到了很多。