css-float - ZURB Foundation を使用したモバイルでの DIV の順序 (プッシュ/プル)

Question

ファンデーションに関する簡単な質問です。div をデスクトップで 1 から 2、モバイルで 2 から 1 の順に配置したい場合、Zurb を使用してこれをどのように達成できますか?

<div class="row">
    <div class="three columns">
    </div>
    <div class="nine columns">
    </div>
</div>

助けてくれてどうもありがとう！

Answer 1

これは間違いなくできます。コードでは、モバイルでの表示方法に基づいて div を順序付けする必要があります。つまり、2 の次に 1 です。より大きな画面で適切に表示するには、div のデフォルトのスタイルをオーバーライドできます。

テスト目的で、次を試すことができます。

<div class="row">
    <div class="nine columns" style="float:right;">
    </div>
    <div class="three columns" style="float:left;">
    </div>
</div>

上記の解決策は機能しますが、インライン スタイルを使用しないことをお勧めします。カスタム クラスや @media タグを使用してオーバーライドしたいと思います。

それらを使用すると、コードは次のようになります。

HTML の場合:

<div class="row">
    <div class="nine columns pull-right">
    </div>
    <div class="three columns pull-left">
    </div>
</div>

CSS/スタイルシートの場合:

@media only screen and (min-width: 768px) {
    .pull-left {float: left !important;}
    .pull-right {float: right !important;}
}

Answer 2

これを css で厳密に実行できるかどうかはわかりませんが、javascript を使用すると、必要に応じて pull-x クラスを追加できます。

理論: モバイル デバイス、または小さな画面に合わせて列を配置します。次に、document.ready で、show-for-small が表示されているかどうかを確認します。表示されていない場合は、より大きな画面にいるため、選択した列に push|pull クラスを適用できます。

プッシュ/プル手法を知っていると仮定した疑似コード:

// do this if not on small screen
if ( $('.show-on-small').css('display') == 'none' ) {
  // pull or push the columns as needed
  $('.myColumnsToPull-two').addClass('pull-two');
} else {
  // might be a good idea to revert above change
}