Changing html hierarchy using jquery for responsive website

Question

I’m making a responsive site when I came across a problem, in the tablet layout the menu is hidden so when you press the button it appears making a slide, but the customer wants the logo to appear on top before the other menus. In the layout for pc the logo is the 3 list-has counting with the item 0. I want to change the hierarchy using jquery, but I’m not getting, could someone help me? Thank you

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

Answer 1

You can manipulate the gift in this case by using the remove() to remove the third place logo and the insertBefore to insert it again. To detect if you are accessing from a mobile screen in your code, use the jQuery Window element width method.

I’ll leave an example below, click execute snippet of code, view whole page and resize the screen to see its effect:

$logo = $("ul li").eq(3);
function positionLogo(){
  if($(window).width() < 480){ //se a tela for menor que 480 px
    $logo.remove().insertBefore("ul li:first-child"); //insiro logo no começo
  }
  else{                             //senão
    $logo.remove().insertAfter("ul li:nth-child(2)"); //insiro logo como terceiro item
  }
}
$(document).ready(positionLogo);
$(window).resize(positionLogo);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li> Item 0 </li>
  <li> Item 1 </li> 
  <li> Item 2 </li>
  <li> Logo <img width="50"src="http://www.skrenta.com/images/stackoverflow.jpg"></li>
</ul>