1. ホーム
  2. html

[解決済み] Bootstrapの右カラムをモバイルビューで上に表示させる

2022-04-20 08:53:43

質問

このようなBootstrapのページがあります。

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

のように見える。

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

そのため、モバイル端末で見ると、A列が一番上になっていますが、B列を一番上にしたいのです。 これは可能なのでしょうか? pushとpullで試しましたが、うまくいきませんでした。

解決方法を教えてください。

使用方法 列の順序 を使えば、これを実現することができます。

col-md-push-6 は、列を右へ 6 つ、そして col-md-pull-6 は、quot;md"以上のビューポートでは、左側に列を引きます。それ以下のビューポートでは、列は再び通常の順序になります。

人々を混乱させるものだと思います。 は、HTMLの中でAの上にBを置かなければならないことです。 . 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|