Bootstrap 5移动端列布局调整求助：桌面两列转中间插入布局

需求：

• 桌面端：两列布局，左侧为「text + controls」，右侧为「img」
• 移动端：调整为「img → text → controls」的垂直顺序，原基于float: right的方案因Bootstrap 5的flexbox特性失效

之前尝试的代码无法达成预期：

<div class="container">
  <div class="row">
      <div class="col-md-6 order-md-1">text</div>
      <div class="col-md-6 order-md-0">img</div>
      <div class="col-md-6">controls</div>
  </div>
</div>

解决方案：
利用Bootstrap 5的嵌套Row和order排序类实现，核心是将「text + controls」放入同一列容器，再通过移动端的order调整img的位置：

<div class="container">
  <div class="row">
    <!-- 右侧：img（桌面端占6列，移动端占12列且排在最前） -->
    <div class="col-md-6 order-first order-md-2">
      img
    </div>
    <!-- 左侧：text + controls（桌面端占6列，移动端占12列） -->
    <div class="col-md-6 order-last order-md-1">
      <div class="row">
        <div class="col-12">text</div>
        <div class="col-12">controls</div>
      </div>
    </div>
  </div>
</div>

说明：

• order-first：移动端下img排在最前面
• order-md-2：桌面端下img排在右侧（第二列）
• order-last：移动端下text+controls排在img之后
• order-md-1：桌面端下text+controls排在左侧（第一列）
• 嵌套row保证text和controls在移动端垂直排列，且在桌面端同属左侧列

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