Reorganizar columnas en la Fundación Zurb

Question

mi problema es que, mientras que en un escritorio me gusta tener el menú primero, y luego el logotipo en el extremo derecho. Actualmente, cuando reduzco la plantilla a una versión móvil, el logotipo va por debajo del menú, que no es satisfactorio. Me gustaría tenerlo antes del menú. He intentado usar push/pull sin éxito.

¿Es posible tener el logo en la parte superior de la plantilla cuando está en la vista móvil?

Aquí está mi código ...

<div class="container" style="margin-top: 15px;"> 
     <div class="row"> 
      <div class="ten columns mobile-four"> 
       <nav> 
        <ul> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
             <li><a href="#">link</a></li> 
        </ul> 
       </nav> 
      </div> 
         <div class="two columns mobile-four"> 
       <a href="index.php"><img src="images/logo.png" alt="logo"/></a> 
      </div> 
       </div> 
    </div> 

Answer 1

Así que primero puede acabar con la clase mobile-four, que no hace nada (a menos que su medida para usted). Mirando la documentación hay un mobile-[one two three], cuatro sería el equivalente a dejarlo.

Para solucionar el problema, basta con aplicar una clase de pedido fuente, así:

<div class="container" style="margin-top: 15px;"> 
     <div class="row"> 
      <div class="two columns push-ten"> 
       <a href="index.php"> 
        <img src="images/logo.png" alt="logo" /></a> 
      </div> 
      <div class="ten columns pull-two"> 
       <nav> 
        <ul> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
         <li><a href="#">link</a></li> 
        </ul> 
       </nav> 
      </div> 
     </div> 
    </div> 

empuje y tire correctamente ordenará el menú primero y segundo logotipo. La función de empujar y tirar se ignora en el dispositivo móvil, lo que significa que su logotipo se acumulará sobre el menú en el dispositivo móvil.

escritorio: [Menú] [logo]

móvil [Logo] [Menú]

Docs: http://foundation.zurb.com/docs/grid.php