嘿，作为Bootstrap新手遇到布局顺序调整的问题很正常，我来帮你搞定这个交换位置的需求！

你的核心问题在于Bootstrap的order类设置，目前的代码在中等屏幕及以上（md断点，≥768px）是图片在右侧、表单在左侧，只需要交换两者的order-md类就能实现你要的效果。

修改后的HTML代码 #

<div class="d-lg-flex half">
  <!-- 图片区域：将order-md-2改为order-md-1，大屏下排在左侧 -->
  <div class="bg order-1 order-md-1" style="background-image: url('images/register.svg');"></div>
  <!-- 表单区域：将order-md-1改为order-md-2，大屏下排在右侧 -->
  <div class="contents order-2 order-md-2">
    <div class="container">
      <div class="row align-items-center justify-content-center">
        <div class="col-md-7">
          <div class="form-group first">
            <label for="username">Email</label>
            <input type="email" class="form-control" required>
          </div>
          <input type="submit" value="Login" class="btn btn-primary">
        </div>
      </div>
    </div>
  </div>
</div>

为什么这样改？ #

• Bootstrap的order类是用来控制Flex容器内元素的排列顺序：
  • order-1和order-2是针对**小屏幕（<768px）**的顺序，保持原来的设置可以让小屏幕下图片在上、表单在下（符合移动端堆叠的友好布局）；
  • order-md-1和order-md-2是针对**中等屏幕及以上（≥768px）**的顺序，交换后图片就会排在左侧，表单在右侧，正好满足你的需求。

额外补充（如果需要小屏幕也交换顺序） #

如果你希望小屏幕下也让表单在上、图片在下，只需要把两个区域的基础order类也交换：

<div class="bg order-2 order-md-1" style="background-image: url('images/register.svg');"></div>
<div class="contents order-1 order-md-2">
  <!-- 表单内容不变 -->
</div>

你的CSS代码不需要做任何修改，因为宽度设置和响应式逻辑都是正确的。

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