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

要实现移动端图片在文本上方、桌面端保持文本左图片右的布局，直接用Bootstrap 5内置的响应式排序类就能搞定，无需额外写复杂的媒体查询。

修改核心代码 #

把原有代码中row下的两个col容器，添加order-*系列类即可：

<div class="row">
    <!-- 文本容器：移动端排第2位，桌面端排第1位 -->
    <div class="col order-2 order-md-1">
        <h3 class="display-3 text-start" id="about" pt-5>About Us</h3>
        <br>
        <p class="text-start">
            We are skilled IT professionals who specialize in solving a range of problems that our clients may face in the realm of IT.
            Through the utilization of state-of-the-art equipment, we provide essential hands-on support that gives businesses the ability to effectively operate and maintain the crucial systems that keep them afloat.
        </p>
        <br>
        <p class="text-start">
            At , we are geared toward using the power of technology to help our clients achieve their business objectives whether it is a client who may be embarking on a new project or are in the process of executing a pre-existing plan. No matter the situation, we promise the smooth and effortless completion of your new or current projects. We are committed to delivering excellent results to our clients to help them achieve their goals and promote growth.
        </p>
        <br />
        <div class="d-grid  col-6 mx-auto mb-4 text-start">
            <button class="btn btn-primary" type="button" id="button">Submit&nbsp;a&nbsp;Ticket</button>
        </div>
    </div>
    <!-- 图片容器：移动端排第1位，桌面端排第2位 -->
    <div class="col order-1 order-md-2">
        <img src="./src/img/about-001.jpeg" class="img-fluid rounded float-start mb-3" alt="IT technicians working">
    </div>
</div>

类名作用说明 #

• order-1/order-2：控制**小屏幕（<768px，即移动端）**的元素顺序，数值越小越靠前，所以图片设order-1会排在文本上方。
• order-md-1/order-md-2：控制**中等屏幕及以上（≥768px，即桌面端）**的元素顺序，还原你原本的文本左、图片右的布局。

额外优化建议 #

你代码里重复引入了Bootstrap 5.3.0和5.2.3的CSS文件，建议只保留一个最新版本，避免出现样式冲突问题。

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