[英]How to responsively order right side blocks to top and bottom of left side block with bootstrap
我有三個塊的移動設計：
_
|A|
|_|
|B|
|_|
|C|
|_|
我想用 bootstrap5 網格系統實現以下響應式 md 設計。
___
|B|A|
| |_|
| |C|
|_|_|
我嘗試了不同的方法，3 行，行中的行，排序等，但我無法找出沒有冗余的響應解決方案。
給你go...
#a, #b-desktop, #b-mobile, #c { border: 1px solid red; font-size: 50px; font-weight: 700; }.container-fluid>.row { height: 100vh; } #b-desktop { height: 100%; } #b-mobile { height: 50vh; } #a { height: 50vh; } #c { height: 50vh; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> <link rel="stylesheet" href="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min:css" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous"> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js" integrity="sha384-skAcpIdS7UcVUC05LJ9Dxay8AXcDYfBJqt1CJ85S/CFujBsIzCIv+l9liuYLaMQ/" crossorigin="anonymous"></script> </head> <body> <div class="container-fluid"> <div class="row"> <div class="col-md-6 d-md-block d-none" id="b-desktop">B</div> <div class="col-md-6"> <div class="row"> <div class="col-12" id="a">A</div> <div class="col-12 d-md-none d-block" id="b-mobile">B</div> <div class="col-12" id="c">C</div> </div> </div> </div> </div> </body> </html>
如果屏幕寬度小於指定的數量，如何快速修剪div的左側和右側？
[英]How to responsively trim off left and right side of div if screen width is below a specified amount?
排列3個iframe-1個主左/ 2個共享右側-一個頂部，一個底部
[英]Arrange 3 iframes - 1 main left / 2 sharing the right side - one top, one bottom
Bootstrap/flexbox 卡：將圖像移動到桌面的左側/右側
[英]Bootstrap/flexbox card: move image to left/right side on desktop
借助Bootstrap響應性地使左右單元向下塌陷，中間單元向上塌陷
[英]Responsively collapse left and right cells downwards, middle cell upwards, with Bootstrap
我想使用引導程序從移動設備的左側刪除填充？
[英]I want to remove padding from left right side in mobile device using bootstrap?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.