Change Sequence of list in Collapsed in bootsrap 4

Question

I have already tried How do I change Bootstrap 3 column order on mobile layout? but it is work with bootstrap3 I want to change order of navbar when it is collapsed in small sceen

My Nav bar code is

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

When it is collapsed it show link as

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

I want to show it as

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

Any idea how to do this in bootstrap 4

Can you post *all* of the navbar code? It's incomplete. – Carol Skelly Apr 08 '18 at 12:04 — Carol Skelly, Apr 08 '18 at 12:04

AndrewL64 · Answer 1 · 2018-04-08T11:47:08.107

You can do that using vanilla css3 flex property like this:

@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;
    }
}

N.B. Change the 1024px according to your site's mobile-view breakpoint.

jsfiddle with above code: https://jsfiddle.net/s51d06k6/300/

score 0 · Accepted Answer · answered Apr 08 '18 at 12:07

You can simply use flex-column-reverse flex-md-row on the navbar-nav...

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>

The flex-column-reverse class reverses the flexbox order on smaller screens when the nav items stack into a column, and flex-md-row to main to row order on larger screens.

Note: I used flex-md-row which corresponds to the navbar-expand-md breakpoint, but you'll need to adjust this to whatever navbar-expand-* you're using.

Change Sequence of list in Collapsed in bootsrap 4

2 Answers2