Bootstrap响应式布局如何实现页面缩小时右列显示在左列上方

你可以使用Bootstrap 5自带的响应式排序工具类实现需求，不需要额外编写自定义CSS，具体操作如下： #

实现原理 #

Bootstrap 5 的order-{断点}-{序号}类支持针对不同屏幕尺寸控制 flex 子元素的排列顺序，序号越小排列越靠前。需求对应规则：

• 大屏（lg断点及以上，≥992px）：文本列在前（左），图片列在后（右）
• 小屏（lg断点以下）：图片列在前（上），文本列在后（下）

具体修改点 #

1. 给原文本列（col-lg-4）添加类 order-2 order-lg-1
2. 给原图片列（col-lg-8）添加类 order-1 order-lg-2
3. 修正原有代码的拼写错误：container-fuild改为正确的container-fluid

修改后完整代码 #

<!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
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU"
    crossorigin="anonymous"
  />
  <link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css"
  />
  <script
    src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ"
    crossorigin="anonymous"
  ></script>
</head>
<body>

<div class="container-fluid padding">
    <div class="row padding">
        <!-- 文本列 -->
        <div class="col-lg-4 order-2 order-lg-1">
            <h2>Our padding</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicin
                g elit. Nostrum, officiis.</p>
                <p>Lorem ipsum dolor sit amet.</p>
            
        </div>
        <!-- 图片列 -->
        <div class="col-lg-8 order-1 order-lg-2">
            <img src="https://via.placeholder.com/300/09f/fff.png" alt="" class="img-fluid">
        </div>
    </div>
</div>

</body>
</html>

效果说明 #

• 大屏状态下，order-lg-1的文本列排在左侧，order-lg-2的图片列排在右侧，和原有效果一致
• 小屏状态下，order-1的图片列排在上方，order-2的文本列排在下方，符合需求
  注：原有代码中图片URL的冗余换行也已同步修正

内容的提问来源于stack exchange，提问作者Andrea Demitri Seferi