在引导 4 中折叠中更改列表的顺序

Question

我已经试过了如何在移动布局上更改引导程序 3 列顺序？但它适用于引导程序3我想在导航栏折叠在小场景中时更改导航栏的顺序

我的导航条形码是

  <a class="navbar-brand" href="#">Website Name</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav  ml-auto">


      <li class="nav-item ">
        <a class="nav-link" href="#">1</a>
      </li> 
      <li class="nav-item  ">
        <a class="nav-link" href="#">2</a>
      </li>
     <li class="nav-item   ">
        <a class="nav-link" href="#">3</a>
      </li>
       <li class="nav-item   ">
        <a class="nav-link" href="#">4</a>
      </li>
       <li class="nav-item ">
        <a class="nav-link" href="#">5</a>
      </li>
     <li class="nav-item active   ">
        <a class="nav-link" href="#">6 <span class="sr-only">(current)</span></a>
      </li>
  </div>
</nav>

当它折叠时，它显示链接为

|1|
|2|
|3|
|4|
|5|
|6|

我想将其显示为

|6|
|5|
|4|
|3|
|2|
|1|

知道如何在引导程序 4 中执行此操作

Answer 1

您可以

简单地在navbar-nav上使用flex-column-reverse flex-md-row...

https://www.codeply.com/go/jNpVWXkxn4

<ul class="navbar-nav ml-auto flex-column-reverse flex-md-row">
     <li class="nav-item">
           <a class="nav-link" href="#">1</a>
     </li>
     ...
</ul>

当导航项堆叠成一列时，flex-column-reverse 类在较小的屏幕上反转弹性框顺序，在较大的屏幕上flex-md-row到主到行顺序。

注意：我使用了与navbar-expand-md断点相对应的flex-md-row，但您需要将其调整为正在使用的任何navbar-expand-*。

Answer 2

您可以使用香草 css3 flex属性执行此操作，如下所示：

@media (max-width: 1024px){
    ul.navbar-nav {
      display: flex;
      flex-direction: column;
    }
    ul.navbar-nav li:first-child {
      order: 6;
    }
    ul.navbar-nav li:nth-child(2) {
      order: 5;
    }
    ul.navbar-nav li:nth-child(3) {
      order: 4;
    }
    ul.navbar-nav li:nth-child(4) {
      order: 3;
    }
    ul.navbar-nav li:nth-child(5) {
      order: 2;
    }
    ul.navbar-nav li:nth-child(6) {
      order: 1;
    }
}

注

：注：根据网站的移动视图断点更改1024px。

JSFIDDLE 与上面的代码： https://jsfiddle.net/s51d06k6/300/