Order of Links reverses under CSS Media Query

Question

I have a set of links for my website's navigation. When the window reaches certain widths, I have a few media queries that help display the navigation properly. Everything is working fine except for the fact that the links are reversed when the window resizes. Why is this happening?

JSFiddle: http://jsfiddle.net/snpx63mx/

Markup

<header>
    <h1><strong>Henry</strong><span id="notbold">+Applications</span></h1>
    <nav>
        <ul>
            <li id="contact"><div id="contactanimation"><a href="contact.html">Contact</a></div></li>
            <li id="project"><div id="projectanimation"><a href="projects.html">Project</a></div></li>
            <li id="me"><div id="meanimation"><a href="about.html">Me</a></div></li>
        </ul>
    </nav>
</header>

CSS

header h1
{       
    font-size: 40px;
    float: left;
    font-weight: 100;
}

header nav
{
    float: right;
}

header nav ul
{
    list-style-type: none;
    margin: 0;
    vertical-align: middle;
    line-height: normal;
    float: right;
    z-index: 999;
    position: relative; /* add this */
}

header nav ul li
{
    line-height: 15px;
    float: right;
    padding: 45px;
    font-size: 22px;
    font-weight: 100;
    text-align: center;
}

header nav ul li a
{
    color: black;
    text-decoration: none;
}

@media screen and (max-width: 1160px) {
    header h1
    {
        float: none;
        text-align: center;
        font-size: 36px;
    }

    header nav
    {
        width: 100%;
        margin-right: 20px;
    }

    header nav ul
    {
        float: none;
        text-align: center;
    }

    header nav ul li
    {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
        padding: 25px;
    }
}

Answer 1

JSFIDDLE: http://jsfiddle.net/snpx63mx/2/

You have a float right on your li tags. This means your bottom li is going to be on the left side when in a wider breakpoint. When it becomes a smaller width, the li stacks on top of each other and it is showing from top top bottom in the order that the lis are listed in html. If you ordered the list items like this :

        <li id="me"><div id="meanimation"><a href="about.html">Me</a></div></li>
        <li id="project"><div id="projectanimation"><a href="projects.html">Project</a></div></li>
        <li id="contact"><div id="contactanimation"><a href="contact.html">Contact</a></div></li>

and then modified your css to float them left, you would have the same order in both sizes.