Bootstrap问题：反转列导致列堆叠显示

需求：在MD断点下，让“second”和“third”两列并排显示，同时反转它们的排列顺序。尝试使用flex-md-column-reverse类后，这两列却变成了堆叠显示，相关代码如下：

<body>
        <div class="row flex-md-column-reverse">
            <aside class="col-6">
                <div class="border-top">
                    <h1>Third</h1>
                </div>
            </aside>
            <div class="col-6"><h1>Second</h1></div>
            <section class="col-12">
                <h1>First</h1>
            </section>
        </div>
    </body>

问题原因 #

flex-md-column-reverse的作用是将flex容器的主轴切换为垂直方向（列布局），同时反转元素顺序，这直接导致原本横向排列的列变成垂直堆叠，和你需要的“并排（横向）”需求完全矛盾。

正确解决方案 #

要实现横向并排且反转顺序，需要使用横向主轴的反转类flex-md-row-reverse，同时确保列在MD断点下保持合适的宽度（建议明确指定col-md-6，增强代码可读性）。

修改后的代码：

<body>
    <div class="row flex-md-row-reverse">
        <aside class="col-md-6">
            <div class="border-top">
                <h1>Third</h1>
            </div>
        </aside>
        <div class="col-md-6"><h1>Second</h1></div>
        <section class="col-12">
            <h1>First</h1>
        </section>
    </div>
</body>

补充说明 #

• flex-md-row-reverse会在MD及以上断点将flex容器的横向主轴反转，元素排列顺序颠倒，从而实现“Second”在左、“Third”在右的反转并排效果，同时保持横向布局不会堆叠。
• 如果需要在小于MD的断点恢复原顺序，可添加默认的flex-row类，即容器类改为row flex-row flex-md-row-reverse。

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