简体   繁体   中英

How to responsively order right side blocks to top and bottom of left side block with bootstrap

I have the mobile design of three blocks:

 _
|A|
|_|
|B|
|_|
|C|
|_|

I want to achive the following responsive md design with bootstrap5 grid system.

 ___
|B|A|
| |_|
| |C|
|_|_|

I've tried different approaches, 3 rows, rows in rows, ordering etc. but I can't figure out the responsive solution, without redundancy.

Here you 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>

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM