如何使用 bootstrap 响应式地将右侧块排序到左侧块的顶部和底部
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 行、行中行、排序等,但我无法找到响应式解决方案,没有冗余。
给你...
#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>
我有三个街区的移动设计:
_
|A|
|_|
|B|
|_|
|C|
|_|
我想用 bootstrap5 网格系统实现以下响应式 md 设计。
___
|B|A|
| |_|
| |C|
|_|_|
我尝试了不同的方法,3 行、行中行、排序等,但我无法找到响应式解决方案,没有冗余。
给你...
#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>