You can use feature of CSS3 called flexbox - the order
property, to be precise. You can use nth-child
to specify elements to change order for or you can simply give them a class and operate using it. Example:
HTML:
<ul class="list-unstyled">
<li class="active"><a href="#">Home</a></li>
<li class="left-element"><a href="#">About Me</a></li>
<li class="left-element"><a href="#">Work</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Blog</a></li>
</ul>
CSS:
.list-unstyled {
display: flex;
list-style: none;
}
.list-unstyled li {
margin: 5px;
}
.list-unstyled li.left-element {
order: -1; /* the default is 0 */
}
Fiddle with this example.
However, be sure to check it's availability on different platforms and make sure it's fine for you. I found out about flexbox
as I found this SO answer.
EDIT:
As T.J.Crowder mentioned, it would be good to use prefixes for specific browsers, as only latest releases of some browsers support non-prefixed implemenation. You can check different prefixed versions here.
Check the extended example (the updated fiddle is here). As for my tests in older Firefox (version 20) it looks like it it does not support values less than 0 for order, so I added order values for all elements:
<ul class="list-unstyled">
<li class="active center-element"><a href="#">Home</a></li>
<li class="left-element"><a href="#">About Me</a></li>
<li class="left-element"><a href="#">Work</a></li>
<li class="right-element"><a href="#">Contact</a></li>
<li class="right-element"><a href="#">Blog</a></li>
</ul>
<style>
.list-unstyled {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */
list-style: none;
}
.list-unstyled li {
margin: 5px;
}
.list-unstyled li.left-element {
-webkit-box-ordinal-group: 0; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 0; /* OLD - Firefox 19- */
-ms-flex-order: 0; /* TWEENER - IE 10 */
-webkit-order: 0; /* NEW - Chrome */
order: 0; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.list-unstyled li.center-element {
-webkit-box-ordinal-group: 1; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 1; /* OLD - Firefox 19- */
-ms-flex-order: 1; /* TWEENER - IE 10 */
-webkit-order: 1; /* NEW - Chrome */
order: 1; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.list-unstyled li.right-element {
-webkit-box-ordinal-group: 2; /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-ordinal-group: 2; /* OLD - Firefox 19- */
-ms-flex-order: 2; /* TWEENER - IE 10 */
-webkit-order: 2; /* NEW - Chrome */
order: 2; /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
</style>