Bootstrap 5布局调整：移动端Section 2需置于Section1与3之间

当前使用Bootstrap 5.2.0的flex-column flex-md-row类实现布局，桌面端双栏布局显示正常，但移动端堆叠布局时，需要让**Section 2（红色区块）**显示在Section 1与Section 3之间。

• 桌面端效果：
• 移动端现有效果：

当前实现代码：

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />    
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

<title>flex column example</title>

</head>

<body>

<div class="container">

    <div class="d-flex flex-column flex-md-row">

        <div class="d-flex flex-column">
            <div class="bg-warning">
                Section 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </div>
            <div class="bg-primary">
                Section 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </div>
        </div>

        <div class="d-flex flex-row">
            <div class="bg-danger">
                Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </div>
        </div>
        
    </div>
    
</div>

</body>

</html>

利用Bootstrap 5的弹性布局排序类和响应式类即可实现需求，无需额外自定义CSS：

<!doctype html>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" />    
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>

<title>flex column example</title>

</head>

<body>

<div class="container">
    <div class="d-flex flex-column flex-md-row">
        <!-- 左侧栏容器，桌面端平分宽度 -->
        <div class="d-flex flex-column flex-fill">
            <div class="bg-warning">
                Section 1: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </div>
            <!-- Section 2移至此处，移动端自然排在Section1之后 -->
            <div class="bg-danger order-md-last mb-3 mb-md-0">
                Section 2: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </div>
            <div class="bg-primary">
                Section 3: Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
            </div>
        </div>
        <!-- 桌面端显示的右侧空容器，承接Section2 -->
        <div class="d-none d-md-flex flex-fill"></div>
    </div>
</div>

</body>

</html>

• order-md-last：让Section2在中等屏幕（md及以上）时排在所在flex容器的最后，自动移到右侧空容器位置
• d-none d-md-flex：右侧容器仅在桌面端显示，用于占位承接Section2
• flex-fill：让左右两栏在桌面端平分宽度，也可替换为col-md-6等栅格类调整占比
• mb-3 mb-md-0：给Section2在移动端添加底部间距，桌面端移除，优化布局美观度

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