[解決済み] 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|
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] スクロールバーを隠すが、スクロールはできる状態
-
[解決済み] リンクを新しいタブまたはウィンドウで開く[重複]。
-
[解決済み] Twitter Bootstrap 3を使用して列を中央に配置する
-
[解決済み] Bootstrap3による垂直方向の整列
-
[解決済み] Zalgoテキストはどのように機能しますか?
-
[解決済み】あるdivの上に別のdivを重ねる方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 箇条書きのない順序なしリストが必要です。
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] HTMLページからのリダイレクト
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] 入力テキストボックスの値を取得する
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] ラジオボタンをデフォルトで選択するには?[重複しています]
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか?
-
[解決済み] Zalgoテキストはどのように機能しますか?
-
[解決済み] CSS背景のストレッチとスケール