Change order of nav items in responsive design

Question

I am using Cascade Framework and have a simple header with a logo, select, and a link to an external site.

My fiddle is here

The layout if fine as is in desktop mode. In responsive mode, it looks something like:

---------------------------------------------
Company Name
---------------------------------------------
Volvo
---------------------------------------------
Menu Here
---------------------------------------------

Whereas I'd like the following in responsive mode:

---------------------------------------------
Company Name                        Menu Here
---------------------------------------------
Volvo
---------------------------------------------

These answers suggest using flexbox or jquery. I can't use flexbox because I need ie8 support. I'd also rather not have to resort to jquery since this seems like it should be a rather straight forward css solution. Another answer on that page shows a ton of css that I've been trying to adapt to my use case and that didn't fix the issue either.

Answer 1

How about using absolute positioning?

.menuHere {
    position:absolute;
    text-align:right;
    right:0
}

http://jsfiddle.net/6txfvvo6/3/