重新排列Zurb基金會的專欄

Question

我的問題是，雖然在桌面上，我喜歡首先有菜單，然後在最右角的標誌。目前，當我將模板縮小到移動版本時，徽標會出現在不令人滿意的菜單下。我想在菜單之前找到它。我嘗試使用推/拉沒有成功。

在移動視圖中甚至有可能在模板頂部放置徽標？

這裏是我的代碼...

<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]，四個將相當於離開它。

要解決這個問題，簡單地套用源排序類，如下所示：

<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