Zurb Foundation의 열 재정렬

Question

내 문제는 바탕 화면에서 맨 처음부터 메뉴를 누른 다음 맨 오른쪽 모서리에 로고가있는 것이 좋습니다. 현재 모바일 버전으로 템플릿을 축소하면 로고가 만족스럽지 않은 메뉴 아래에 표시됩니다. 메뉴 이전에 가지고 싶습니다. push/pull을 사용하여 아무런 성공도 시도하지 못했습니다.

모바일보기에서 템플릿 상단에 로고를 표시 할 수 있습니까?

다음

내 코드는 ...

<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

을 그래서 먼저 떨어져 mobile-four 클래스로 할 수있는, 그것은 (그 정의하지 않는 한 당신에게) 아무것도하지 않습니다. 설명서에는 mobile-[one two three]이 있으며, 4 개는 그만 두는 것과 같습니다.

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

밀어 첫 번째 메뉴 및 로고 두번째 주문 올바르게 것이다 당기 :

간단히과 같이, 소스 순서 클래스를 적용, 문제를 해결합니다. 밀고 당기는 것은 모바일에서 무시됩니다. 즉, 모바일에서 메뉴 위에 로고가 쌓이게됩니다.

데스크톱 : [메뉴] [로고]

모바일 [로고] [메뉴]

문서 : http://foundation.zurb.com/docs/grid.php