如何在Bootstrap 5中实现移动端图片Div置于文本Div上方

核心问题排查 #

你的方案仅单页生效，大概率是以下两个原因：

1. 多版本Bootstrap冲突：代码里重复引入了Bootstrap 5.2.0、5.3.0、5.2.3三个版本，不同版本的样式优先级互相覆盖，导致order类在其他页面失效。
2. 其他页面布局结构不规范：未严格遵循Bootstrap的row+col嵌套规则，或者自定义CSS覆盖了Bootstrap的响应式排序样式。

通用解决方案 #

1. 清理重复依赖 #

所有页面只保留一个Bootstrap版本（推荐最新稳定版），删除多余的引入链接。

2. 统一响应式排序结构 #

在所有需要实现「移动端图片在上、文本在下，桌面端反之」的页面，严格使用以下结构：

<section>
  <div class="container mt-5">
    <div class="row align-items-center">
      <!-- 文本区域：桌面端排第1，移动端排第2 -->
      <div class="col-md-6 order-2 order-md-1">
        <h3 class="display-3 text-start">你的标题</h3>
        <p>你的段落内容...</p>
        <!-- 其他元素 -->
      </div>
      <!-- 图片区域：桌面端排第2，移动端排第1 -->
      <div class="col-md-6 order-1 order-md-2">
        <img src="你的图片地址" class="img-fluid rounded" alt="图片描述">
      </div>
    </div>
  </div>
</section>

• order-1/order-2：控制移动端（<768px）的排序，order-1在前
• order-md-1/order-md-2：控制桌面端（≥768px）的排序，order-md-2把图片放到右侧

3. 排查自定义样式冲突 #

检查其他页面的自定义CSS，确保没有写以下会覆盖Bootstrap order的代码：

/* 这类代码会破坏Bootstrap的flex排序 */
.col-md {
  position: absolute !important;
  float: left !important;
}

修正后的完整代码示例 #

CSS（all-services.css） #

body {
    background: hsl(233, 47%, 96%);
}

@media (min-width: 576px) {
    h3:after {
        background: hsl(210, 55%, 41%);
        bottom: -10px;
        content: "";
        display: block;
        height: 2px;
        position: relative;
        width: 100px;
     }
}

h3 {
    font-weight: 300;
}

HTML #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CCTV Services |</title>
    
    <!-- 只保留一个Bootstrap版本 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 只保留一个Font Awesome版本 -->
    <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="icon" type="image/x-icon" href="/Bootstrap-/images/favicon-32x32.png">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
    <!-- CCTV SERVICES SECTION START -->
    <section>
        <div class="container mt-5">
            <div class="row align-items-center">
                <!-- 文本区域 -->
                <div class="col-md-6 order-2 order-md-1">
                    <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&nbsp;a&nbsp;Ticket</button>
                        </div>
                    </p>
                </div>
                <!-- 图片区域 -->
                <div class="col-md-6 order-1 order-md-2">
                    <img src="https://picsum.photos/seed/picsum/600/400" class="img-fluid rounded mb-3" alt="IT technician working">
                </div>
            </div>
        </div>
    </section>
    <!-- CCTV SERVICES SECTION CLOSE -->
</body>
</html>

跨页面通用注意事项 #

• 所有页面的Bootstrap和第三方依赖版本必须统一，避免样式冲突
• 所有需要排序的模块必须放在row容器内，col直接作为row的子元素
• 不要用!important强制修改col的布局属性，会破坏Bootstrap的flex布局逻辑

内容的提问来源于stack exchange，提问作者PFL