Estou fazendo um site responsivo quando me deparei com um problema, no layout para tablet o menu fica escondido para quando apertar o botão ele aparecer fazendo um slide, mas o cliente quer que o logo apareça em cima antes dos outros menus. No layout para pc o logo é o 3 list-tem contando com o item 0. Estou querendo mudar a hierarquia usando jquery, mas não estou conseguindo, alguem poderia me ajudar? Obrigado
HTML:
<nav class="nav">
<ul>
<li><a href="#"><img class="lupa" src="img/lupa.png" alt="Pesquisar" onClick="MostrarCampoPesquisa()"></a>
<div id="caixaPesquisa">
<form id="formPesquisa" action="" method="get">
<input id="pesquisa" type="text" value="" maxlength="150" placeholder="Pesquisar..." onBlur="EsconderCampoPesquisa()">
</form>
</div>
</li>
<li><a href="#">Página Inicial</a></li>
<li><a href="#">Produtos<img class="flechaVertical" src="img/flecha.png" alt="flecha"></a>
<ul>
<li><a href="#">Aparadores de Livros</a></li>
<li><a href="#">Caixinhas</a></li>
<li><a href="#">Chaveiros</a></li>
<li><a href="#">Decoração</a></li>
<li><a href="#">Pontos Turísticos</a></li>
<li><a href="#">Porta Celulares</a></li>
<li><a href="#">Porta Guardanapos</a></li>
<li><a href="#">Porta Retratos</a></li>
<li><a href="#">Relógios</a></li>
<li><a href="#">Topos De Bolos</a></li>
<li><a href="#">Veículos</a></li>
</ul>
</li>
<li><a href="#"><img id="navLogo" class="navLogo" src="img/logotipo.png" alt="Versatyll"></a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
<li><a href="#">Dúvidas</a></li>
</ul>
</nav>
CSS:
#caixaPesquisa{
padding-left:15px;
}
#pesquisa{
width:160px;
height:50px;
margin-left:10px;
display:none;
position:absolute;
text-align:center;
border:1px solid #222222;
}
/* -------------------------------*/
/* Navigation Menus */
.lupa{
width:30px;
height:30px;
}
.flechaVertical{
width:8px;
height:8px;
padding-left:5px;
}
.navLogo{
width:160px;
height:90px;
}
.nav{
width: 100%;
margin: 0;
text-align: left;
background-color: #FFFFFF;
position: fixed;
}
.nav ul{
list-style:none;
padding:0;
margin:0;
position:relative;
}
.nav ul li{
display:inline-block;
}
.nav ul li a,visited{
color:#000000;
display:block;
padding:10px;
padding-left:85px;
text-decoration:none;
}
.nav ul li a:hover{
color:#990000;
text-decoration:none;
}