如何仅用CSS调整Bootstrap 5移动端Sticky区块的排序？

解决方案 #

要实现移动端把sticky区块放到第一个box之后，核心问题是原结构里sticky和box不在同一个布局容器中，没法直接用flex order跨容器调整顺序。这里提供两种纯CSS的实现方式：

方案一：利用Bootstrap显示类（简单快速）

这种方法通过复制sticky内容，用Bootstrap的响应式显示类控制不同设备下的显示状态，适合内容静态的场景：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 600px;
        }
        .box  {
            width: 100%;
            margin-bottom: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:92px;
        }
        .box:nth-of-type(1) {
            background-color: #A7A7A7;
            height: 232px;
        }
        .box:nth-of-type(2) {
            background-color: #A7A7A7;
            height: 250px;
        }
        .box:nth-of-type(3) {
            background-color: #A7A7A7;
            height: 500px;
        }
        .sticky {
            background-color: #DDBEBE;
            width: 100%;
            height: 300px;
            position: sticky;
            top:0;
            margin-bottom: 32px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="box">1</div>
                <!-- 移动端显示的sticky -->
                <div class="sticky d-lg-none">sticky area</div>
                <div class="box">2</div>
                <div class="box">3</div>
            </div>
            <div class="col-lg-6">
                <!-- 桌面端显示的sticky -->
                <div class="sticky d-none d-lg-block">sticky area</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</body>
</html>

方案二：CSS Grid布局（无内容重复，更优雅）

通过调整HTML结构，结合CSS Grid在桌面端重新排列元素，移动端保持自然顺序：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
    <style>
        body {
            padding-top: 50px;
            padding-bottom: 600px;
        }
        .box  {
            width: 100%;
            margin-bottom: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size:92px;
        }
        .box:nth-of-type(1) {
            background-color: #A7A7A7;
            height: 232px;
        }
        .box:nth-of-type(2) {
            background-color: #A7A7A7;
            height: 250px;
        }
        .box:nth-of-type(3) {
            background-color: #A7A7A7;
            height: 500px;
        }
        .sticky {
            background-color: #DDBEBE;
            width: 100%;
            height: 300px;
            position: sticky;
            top:0;
            margin-bottom: 32px;
        }

        /* 桌面端Grid布局 */
        @media (min-width: 992px) {
            .row {
                display: grid;
                grid-template-columns: 1fr 1fr;
                grid-gap: 0;
                grid-template-areas: 
                    "box1 sticky"
                    "box2 sticky";
            }
            .box-group-1 {
                grid-area: box1;
            }
            .sticky-col {
                grid-area: sticky;
            }
            .box-group-2 {
                grid-area: box2;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row">
            <!-- 第一个box单独分组 -->
            <div class="box-group-1 col-lg-6">
                <div class="box">1</div>
            </div>
            <!-- sticky区块 -->
            <div class="sticky-col col-lg-6">
                <div class="sticky">sticky area</div>
            </div>
            <!-- 第二、三个box分组 -->
            <div class="box-group-2 col-lg-6">
                <div class="box">2</div>
                <div class="box">3</div>
            </div>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
        crossorigin="anonymous"></script>
</body>
</html>

两种方案都不需要JavaScript，完全符合你的需求：

• 方案一适合快速实现，代码改动最小
• 方案二更优雅，避免内容重复，适合需要维护动态内容的场景

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