Bootstrap 4 Navbar

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<! -- Navbar -->
<nav class="navbar navbar-fixed-top navbar-light bg-faded">
  <button class="navbar-toggler pull-xs-right hidden-md-up" type="button" data-toggle="collapse" data-target="#navbar-collapse">&#9776;</button>
  <a class="navbar-brand" href="#">Responsive navbar</a>
  <div class="collapse navbar-toggleable-sm" id="navbar-collapse">
    <ul class="nav navbar-nav pull-xs-right">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
  </div>
</nav>
<! -- End Navbar -->

CSS

body { background-color: skyBlue; min-height:200vh;}

.navbar{border-radius:0;}
.navbar-toggler{border:1px solid rgba(0,0,0,0.2);}
.navbar-toggler:hover{background:rgb(240,240,240)}
.navbar-toggler:focus{outline:0;}

@media(max-width:47.9em) {
  .navbar .navbar-brand {float:none;display: inline-block;}
  .navbar .navbar-nav>.nav-item { float: none; margin-left: .1rem;}
  .navbar .navbar-nav {float:none !important;}
  .nav-item{width:100%;text-align:left;}
  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;
    }
}