☰

モバイルビューで上部にBootstrapの右列を表示する 質問する

tag-icon • tag-icon html css twitter-bootstrap-3
モバイルビューで上部にBootstrapの右列を表示する 質問する

次のような Bootstrap ページがあります:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

次のようになります:

-----
|A|B|
-----

モバイル デバイスで見ると、列 A が上に表示されますが、列 B を上に表示したいです。これは可能ですか? プッシュとプルで試しましたが、うまくいきませんでした。

ベストアンサー1

使用列の順序これを達成するために。

col-md-push-6列を右に「押し出し」、col-md-pull-6ビューポートが「md」以上の場合は列を左に「引き出し」ます。ビューポートがこれより小さい場合は、列は通常の順序に戻ります。

人々を混乱させるのは、HTMLではBをAの上に置かなければならないということですHTML で A を B の上に配置できる別の方法があるかもしれませんが、その方法がわかりません...

デモ

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

ビューポート >= md

|A|B|

ビューポート < md

|B|
|A|

おすすめ記事