Bootstrap ul navigation float right but order left

Question

I am trying to code a bootstrap navigation structure with 9 (don't laugh at my client please) buttons.

I want the first 5 buttons on top of the other 4, aligned to the right. The problem is that when I align them to the right, the buttons reverse in order. I solved this by creating two different lists, but that makes it reverse it when making the screen smaller. I think there should be a simple solution, but I can't find it. You can see an example at: http://www.sanderfish.nl/haptokuijpers/index.html

Here is my HTML:

<div class="navbar navbar-inverse navbar-static-top">
      <div class="container">
        <div class="navbar-left navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><img src="assets/img/logo.png"</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html">Home</a></li>
            <li><a href="voor-wie.html">Voor wie</a></li>
            <li><a href="psychosomatiek.html">Psychosomatiek</a></li>
            <li><a href="haptotherapie.html">Haptotherapie</a></li>
            <li><a href="diana-kuijpers.html">Diana Kuijpers</a></li>
            <li><a href="vergoeding.html">Vergoeding</a></li>
            <li><a href="klachtenlijsten.html">Klachtenlijsten</a></li>
            <li><a href="uitgeverij-vib.html">Uitgeverij VIB</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

And this is the CSS:

@media (min-width: 768px) {

.navbar-nav {
  float: right;
  margin: 0;
  text-align: right;
}
.navbar-nav > li {
  float: left;
  text-align: right;
}
.navbar-nav > li > a {
  padding-top: 20px;
  padding-bottom: 10px;
  display: block;
  text-align: right;
}
.navbar-nav.navbar-right:last-child {
  margin-right: 0px;
  text-align: right;
}
}

@media (min-width: 768px) {
.navbar-left {
  float: left !important;
}
.navbar-right {
  float: right !important;
  padding-right: 34px;
  text-align: right;
  max-width: 750px;
}
}

Thanks in advance!

Answer 1

I don't understand why are you doing this since you're overriding not only Bootstrap, but the concept of responsive design altogether, but you'll know. Anyways, simply change this part:

.navbar-inverse .navbar-nav > li > a {
    color: #FFF;
    float: right;
}

to

.navbar-inverse .navbar-nav > li > a {
    color: #FFF;
    float: left;
}

Answer 2

You don't need any custom CSS, just separate the two chunks of links into separate navbar-navs, and do navbar-right on the one you want to the right: DEMO: http://www.bootply.com/X0kDjEwnga

    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="index.html">Home</a></li>
        <li><a href="voor-wie.html">Voor wie</a></li>
        <li><a href="psychosomatiek.html">Psychosomatiek</a></li>
        <li><a href="haptotherapie.html">Haptotherapie</a></li>
        <li><a href="diana-kuijpers.html">Diana Kuijpers</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="vergoeding.html">Vergoeding</a></li>
        <li><a href="klachtenlijsten.html">Klachtenlijsten</a></li>
        <li><a href="uitgeverij-vib.html">Uitgeverij VIB</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->

You may need to address their overlap when at specific in-between widths, but that's another story.