Zurb Foundationの列を並べ替える

Question

私の問題は、デスクトップ上ではメニューが最初にあるのが好きで、右端にロゴがあるのが好きです。現在、テンプレートをモバイル版に縮小すると、ロゴはメニューの下に表示され、満足のいくものではありません。私はメニューの前にそれを持っていたいと思います。私はプッシュ/プルを成功させずに使ってみました。

モバイルビューでは、テンプレートの上にロゴを表示することはできますか？ここで

だからまず、あなたがmobile-fourクラスを離れて行うことができますが、それは（あなたにそのカスタムなければ）何もしません

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