Sắp xếp lại các cột trong Zurb Foundation

Question

vấn đề của tôi là trong khi trên một máy tính để bàn tôi thích có menu đầu tiên, và sau đó là biểu tượng ở góc xa bên phải. Hiện tại khi tôi thu nhỏ mẫu xuống phiên bản dành cho thiết bị di động, biểu trưng sẽ nằm trong menu không thỏa đáng. Tôi muốn có nó trước menu. Tôi đã thử sử dụng push/pull không thành công.

Thậm chí có thể có biểu tượng ở trên cùng của mẫu khi ở chế độ xem di động không?

Đây là mã của tôi ...

<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

Vì vậy, đầu tiên bạn có thể loại bỏ các lớp mobile-four, nó không làm bất cứ điều gì (trừ khi tùy chỉnh nó cho bạn). Nhìn vào các tài liệu có một mobile-[one two three], bốn sẽ là tương đương với để lại nó đi.

Để khắc phục được vấn đề, chỉ cần áp dụng một lớp nguồn đặt hàng, như vậy:

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

Đẩy và kéo sẽ chính xác đặt Menu đầu tiên và Logo thứ hai. Đẩy và kéo được bỏ qua trên thiết bị di động, có nghĩa là biểu tượng của bạn sẽ xếp chồng lên trên menu trên thiết bị di động.

Desktop: [Menu] [Logo]

Mobile [Logo] [Menu]

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