Bootstrap5如何实现不同视口下的内容排列顺序切换？

该问题此前已有多次解答，但所有方案均针对Bootstrap 4——截至2021年10月20日，Bootstrap 4距离停止维护仅余11个月。
目前Bootstrap 5是唯一仍在活跃维护、且未公布关键支持终止日期的Bootstrap版本，因此我想寻找适配Bootstrap 5的解决方案。我曾尝试在原有回答下评论咨询，但因账号声望不足无法评论，因此选择发布新的提问。

我需要实现如下内容布局：
默认移动端布局下，内容按1、2、3的顺序从上到下堆叠；大屏设备下，我希望板块2位于左侧，板块1和板块3位于右侧。

我尝试了第一个关联问题给出的方案：

<div class="row d-sm-block">
    <div class="col-sm-9 order-2 order-md-0 float-left">2</div>
    <div class="col-sm-3 order-3 order-md-0 float-right">3</div>
    <div class="col-sm-3 order-1 order-md-0 float-right">1</div>
    <div class="col-sm-3 order-4 order-md-0 float-right">4</div>
</div>

该方案在Bootstrap 4下可正常运行，但在Bootstrap 5下失效。
我也尝试了其他相关方案，但将其适配到Bootstrap 5.0.2及以上版本后，板块2无法正常浮动到左侧。还有部分接近预期的回答存在缺陷：会让第一个板块的高度和第二个板块一致，强制第三个板块单独占据一行。

请问有没有适配Bootstrap 5的解决方案？我需要修改哪些类名才能实现正常显示？
另外，我也考虑过是不是这种实现思路本身不合理，Bootstrap是否是故意移除了相关支持？如果不推荐该方案，我也可以选择复制HTML代码，通过viewport断点控制显示隐藏来实现效果。我不想这么做是因为觉得代码不够优雅，但如果大家认为这是可接受的方案，我也可以采用该方法。

Bootstrap 5 中原有方案失效的核心原因是 .row 默认采用 flex 布局，而浮动属性在 flex 容器内不会生效，只需对原有代码做少量调整即可实现需求，无需重复编写HTML做显示隐藏适配。

实现代码 #

<div class="container">
  <div class="row g-3 d-md-block">
    <!-- 板块1：移动端排第1，大屏排右侧上部 -->
    <div class="col-md-6 float-md-end mb-3">
      <div class="border p-3">板块1</div>
    </div>
    <!-- 板块2：移动端排第2，大屏排左侧 -->
    <div class="col-md-6 float-md-start">
      <div class="border p-3" style="min-height: 180px;">板块2（可自定义高度）</div>
    </div>
    <!-- 板块3：移动端排第3，大屏排右侧下部 -->
    <div class="col-md-6 float-md-end">
      <div class="border p-3">板块3</div>
    </div>
    <!-- 清除浮动避免容器高度塌陷 -->
    <div class="clearfix"></div>
  </div>
</div>

关键修改点 #

• 给 .row 添加 d-md-block 类，在大屏断点下将行容器从默认flex布局改为块级布局，让浮动属性可以正常生效
• HTML结构直接按照移动端展示顺序1→2→3编写，无需额外设置order类，移动端flex布局下会自动按照HTML顺序堆叠
• 大屏下通过float-md-start让板块2居左，float-md-end让板块1、3居右，自动形成左侧单列、右侧上下堆叠的布局

这个方案完全使用Bootstrap 5原生类实现，无自定义CSS，也不需要重复HTML代码，符合优雅编码的要求。

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