Bootstrap ul navigation float right but order left to right - html

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>Home</li>
<li>Voor wie</li>
<li>Psychosomatiek</li>
<li>Haptotherapie</li>
<li>Diana Kuijpers</li>
<li>Vergoeding</li>
<li>Klachtenlijsten</li>
<li>Uitgeverij VIB</li>
<li>Contact</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

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>Home</li>
<li>Voor wie</li>
<li>Psychosomatiek</li>
<li>Haptotherapie</li>
<li>Diana Kuijpers</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>Vergoeding</li>
<li>Klachtenlijsten</li>
<li>Uitgeverij VIB</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
You may need to address their overlap when at specific in-between widths, but that's another story.

Answer 2

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