Порядок ссылок меняется под CSS Media Query

Question

У меня есть набор ссылок для навигации по моему сайту. Когда окно достигает определенной ширины, у меня есть несколько media queries, которые помогут правильно отобразить навигацию. Все работает нормально, за исключением того, что ссылки меняются на противоположные, когда изменяется размер окна. Почему это происходит?

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/

У вас есть поплавок прямо на ваших тегах li. Это означает, что ваш нижний li будет на левой стороне, когда в более широкой точке останова. Когда он становится меньшей шириной, li складывается поверх друг друга, и он отображается сверху вниз в порядке, в котором lis перечислены в html. Если вы заказали пункты списка, как это:

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

, а затем Изменив CSS, чтобы они плавали слева, то будет иметь тот же порядок в обоих размеров.

Answer 2

Это то, что я сказал в комментарии, изменить float: right к float: left:

header nav ul li 
{ 
    float: left; 
} 

FIDDLE: https://jsfiddle.net/lmgonzalves/snpx63mx/1/