Ordering Nav list items when using float right

Question

I have the follwoing bootstrap navigation and it is styled how i want it except the list items are in the wrong order.

Tandems is the first list item and Contact is the last and I would like it to appear in the following order but float to the right. Eight and nine should be floated right.

Edit* Fiddle not working with pull right

My html is as follows

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
            <!-- Brand and toggle are grouped for better mobile display -->
            <div class="navbar-header page-scroll col-md-2">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top"><img src="img/logo.png" alt="logo" /></a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse " id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav navbar-right col-md-9">
                    <li><a class="page-scroll" href="#services">Tandems</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Charities <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="videobackground.html">NW Air Ambulance</a></li>
                            <li><a href="icons.html">Alder Hey Imagine</a></li>
                            <li><a href="typography.html">Clatterbridge</a></li>
                            <li><a href="pricingtables.html">We are Macmillan</a></li>
                        </ul>
                    </li>
                    <li><a class="page-scroll" href="#pricing">Courses</a></li>
                    <li><a class="page-scroll" href="#about">Prices</a></li>
                    <li><a class="page-scroll" href="#blog">Events</a></li>
                    <li><a class="page-scroll" href="#contact">Gallery</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Features <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="videobackground.html">Video Background</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="icons.html">Icons</a></li>
                            <li><a href="typography.html">Typography</a></li>
                            <li><a href="pricingtables.html">Pricing Tables</a></li>
                            <li><a href="buttons.html">Buttons</a></li>
                            <li><a href="progressbars.html">Progress Bars</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="blank.html">Blank Page</a></li>
                            <li><a href="404.html">404 Page</a></li>
                        </ul>
                    </li>
                    <li><a class="page-scroll" href="#contact">The Dropzone</a></li>
                    <li><a class="page-scroll" href="#contact">Contact</a></li>
                </ul>
            </div>
        <!-- /.navbar-collapse -->
    </div>
    <!-- /.container-fluid -->
</nav>

Is there a way to do this using CSS? Here is a fiddle that includes my html and css.

Thanks Paul

Answer 1

Flexbox can do that..quite simply:

ul {
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
  flex-wrap:wrap;
}

a {
  text-decoration: none;
  padding:.25em;
  border:1px solid grey;
  display:block;
}

<ul>
  <li><a href="#">Menu Item 1</a></li>
  <li><a href="#">Menu Item 2</a></li>
  <li><a href="#">Menu Item 3</a></li>
  <li><a href="#">Menu Item 4</a></li>
  <li><a href="#">Menu Item 5</a></li>
  <li><a href="#">Menu Item 6</a></li>
  <li><a href="#">Menu Item 7</a></li>
  <li><a href="#">Menu Item 8</a></li>
  <li><a href="#">Menu Item 9</a></li>
</ul>

Answer 2

Float the container element of the navigation list items to the right instead of the navigation items themselves.

Here is a simplified example.

<header>
    <ul class="pull-right">
        <li>One</li>
        <li>Two</li>
        <li>Three</li>
    </ul>
</header>

header {
    overflow: hidden; /* clearfix */
    background-color: #222;
}
ul, li {
    margin: 0;
    padding: 0;
}
ul li {
    padding: 5px 10px;
    list-style: none;
    float: left;
    color: #f1f1f1;
}
.pull-right {
    float: right;
}

Demo JSFiddle

When you float the navigation/list items themselves they get floated to the right in the order they appear in the markup which has the effect of reversing the order. Tandems appears first in the markup so it moves to the right before the next item, which is Charities. Now Charities moves to the right before the next item, Courses. This continues for all items as the line-up after the item that moved to the right before them giving the appearance of reversed order.

The fix, as mentioned, is to float the container of the items instead of the items themselves. This may require a clearfix on the parent container depending on the styling.