Ponowne rozmieszczanie kolumn w Zurb Foundation

Question

moim problemem jest to, że podczas pracy na komputerze lubię mieć najpierw menu, a potem logo w prawym rogu. Obecnie, gdy zmniejszam szablon do wersji mobilnej, logo przechodzi pod menu, które nie jest satysfakcjonujące. Chciałbym mieć to przed menu. Próbowałem używać push/pull bez powodzenia.

Czy jest możliwe umieszczenie logo na górze szablonu w widoku mobilnym?

Oto mój kod ...

<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

więc najpierw można zlikwidować klasy mobile-four, to nie robić nic (chyba że jego zwyczajem do Ciebie). Patrząc na dokumentację jest mobile-[one two three], cztery będą równoznaczne z pozostawieniem go.

Aby rozwiązać ten problem, należy zastosować klasę źródło zamówień, tak:

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

popchnąć i pociągnąć będzie poprawnie zamówić pierwsze menu i logo sekundę. Funkcje push i pull są ignorowane na urządzeniach mobilnych, co oznacza, że ​​Twoje logo będzie układać się nad menu na urządzeniu mobilnym.

Pulpit: [Menu] [Logo]

Komórka [Logo] [Menu]

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