Foundationで3つの列の順序を変更する方法

Question

私はFoundation 6 Frameworkを使用しており、3つの列の順序をデスクトップ上で2つのように変更するのに問題があります。

私は携帯ブレークポイントでこのレイアウトを持っている：
[コラム1]
[列2]
[列3]

をして、デスクトップ上で次のようになります。
[列2] [コラム1]
[カラム2] [列1]
[カラム2] [コラム3]
- - - - - - - - > [コラム3]
私はまだフレックスボックスを使用することはできませんので
Desktop Layout with The problem

は、最初に私はソース順序を使用しようとしました（：

ページには、常に時にはそれが壊れ、列番号2に大きなコンテンツを持っていませんプルとプッシュ）、スタックされた列（この場合は列2と3のように）ではうまく機能しません。この解決策は、第1列のFoundationのfloat-rightクラスを使用して適用されました（最後の列であるため、列2にはすでに 'float：right'があると仮定します）。

マイコード：

<div class="row"> 
    <div class="column small-12 large-4 float-right">column 1</div> 
    <div class="column small-12 large-8">column 2</div> 
    <div class="column small-12 large-4">column 3</div> 
</div> 

誰もがこの問題を解決するための良い方法を知っていますか？ありがとう。

Answer 1

もう1組の行と列に分解してみませんか？例えば：

<div class="row"> 
    <div class="small-12 large-8 columns"> 
     <div class="row"> 
      <div class="large-12 columns">column 2 
      </div> 
     </div> 
    </div> 
    <div class="small-12 large-4 columns"> 
     <div class="row"> 
      <div class="large-12 columns">column 1 
      </div> 
     </div> 
     <div class="row"> 
      <div class="large-12 columns">column 2 
      </div> 
     </div> 
    </div> 
</div> 

Answer 2

あなたがドキュメントに一部を発注ソースを通過することを確認してください。 http://foundation.zurb.com/sites/docs/grid.html#source-ordering

あなたは物事

Answer 3

の順序を制御するために（数字でXを置き換える） small-push-x、 large-pull-xを使用することができます

pullとpushクラスのレイアウトと使用の正しい順序を使用することによって。この3列の例をご覧ください：

<div class="row"> 
    <div class="medium-6 medium-push-3 columns"> 
     Page content 
    </div> 
    <div class="medium-3 medium-push-3 columns"> 
     <h4>Course Details</h4> 
     <table> 
      <tbody> 
       <tr> 
        <td>Course Fee:</td> 
        <td>&pound; 50</td> 
       </tr> 
       <tr> 
        <td>Course Duration:</td> 
        <td>1 Month</td> 
       </tr> 
       <tr> 
        <td></td> 
        <td></td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
    <div class="medium-3 medium-pull-9 columns"> 
     <div> 
      <h4>Course Map</h4> 
      List of courses   
     </div> 
    </div> 
</div>