我正在使用 Bootstrap 5 制作一个网站，我正在努力使该网站在所有设备上响应更快。
当有人使用移动设备时，我希望保存图像的 div 位于包含标题和段落文本的 div 上方，我之前问过一个有关如何执行此操作的问题here，我得到的答案是我网站的页面，但对其他人不起作用。我得到的解决方案是下面的代码片段。谢谢你。
body {
background: hsl(233, 47%, 96%);
/* font-family: 'Montserrat', sans-serif; */
}
@media (min-width: 576px) {
h3:after {
background: none repeat scroll 0 0 hsl(210, 55%, 41%);
bottom: -10px;
content: "";
display: block;
height: 2px;
position: relative;
width: 100px;
}
}
h3 {
font-weight: 300;
}<!DOCTYPE html>
<html lang="en">
<!--divinectorweb.com-->
<head>
<meta charset="UTF-8">
<title>CCTV Services |</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="./css/all-services.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<!-- CCTV SERVICES SECTION START -->
<section>
<div class="container text-left mt-5">
<div class="row">
<div class="col-md col-12 order-1 order-md-0">
<h3 class="display-3 text-start" id="long">CCTV Services</h3>
<br>
<p>
<b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that their CCTV system is working 24/7 to keep their employees, customers, and partners safe.
<br />
<br />
So when something goes amiss it is of utmost importance to get the right CCTV Support that has technicians who are equipped with the tools needed to get your CCTV system back online. So whether your cameras receive their power through LTE, solar energy, or anything in between we have the necessary equipment to get you back into action.
<br />
<div class="d-grid gap-2 col-6 mx-auto mb-4">
<button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
</div>
</p>
</div>
<div class="col-md col-12 order-0 order-md-1">
<!-- <div class="col"> -->
<img src="https://picsum.photos/seed/picsum/300/300" class="img-fluid rounded float-start mb-3" alt="IT technician working">
<!-- </div> -->
</div>
</section>
<!-- CCTV SERVICES SECTION CLOSE -->
</body>
</html>您可以使用
flex类，而不是使用
rowcol 类。
d-flexflex-column-reverseflex-sm-row（我没有做任何工作来解决尺寸问题。）
<section>
<div class="container text-left mt-5">
<div class="d-flex flex-column-reverse flex-sm-row">
<div>
<h3 class="display-3 text-start" id="long">CCTV Services</h3>
<br>
<p>
<b>CCTV Services</b> are an essential component of any business. CCTV provides real-time monitoring of multiple locations; the security they supply is indispensable, allowing businesses to have peace of mind knowing that their CCTV system is working 24/7 to keep their employees, customers, and partners safe.
<br />
<br />
So when something goes amiss it is of utmost importance to get the right CCTV Support that has technicians who are equipped with the tools needed to get your CCTV system back online. So whether your cameras receive their power through LTE, solar energy, or anything in between we have the necessary equipment to get you back into action.
<br />
<div class="d-grid gap-2 col-6 mx-auto mb-4">
<button class="btn btn-primary" type="button" id="button">Submit a Ticket</button>
</div>
</p>
</div>
<div>
<!-- <div class="col"> -->
<img src="https://picsum.photos/seed/picsum/300/300" class="img-fluid rounded float-start mb-3" alt="IT technician working">
<!-- </div> -->
</div>
</div>
</div>
</section>