基于设备屏幕调整元素位置：Bootstrap 4响应式布局适配需求

这需求用Bootstrap 4的内置工具就能完美解决，不用额外写CSS，核心是利用栅格系统和**排序类（order-*）**来控制不同屏幕尺寸下的元素顺序和布局。我直接给你调整好的代码，再一步步解释思路：

修改后的HTML结构 #

<div class="container">
  <div class="row">
    <!-- 右侧内容区：桌面占6列，移动端排最顶部 -->
    <div class="col-md-6 order-md-2 order-1">
      <div class="row">
        <div id="locate" class="col-12">
          ******Locate Content Here******
        </div>
        <div id="order" class="col-12">
          ******Order Content Here******
        </div>
      </div>
    </div>

    <!-- 图片容器：桌面占6列，移动端居中排中间 -->
    <div id="home-img" class="col-md-6 order-md-1 order-2 d-flex justify-content-center">
      <img src="your-image-path.jpg" alt="Home Banner" class="img-fluid">
    </div>
  </div>
</div>

关键类的作用解释 #

• order-md-* & order-*：Bootstrap 4的排序类，用来控制flex容器内元素的顺序。order-md-2表示在屏幕宽度≥768px（桌面）时，这个元素排在第2位（右侧）；order-1表示在小屏幕（移动端）时排在第1位（最顶部）。图片容器的order-md-1和order-2则对应相反的顺序，实现移动端的布局切换。
• d-flex justify-content-center：让图片容器变成flex容器，内部的图片水平居中，移动端显示更美观。
• img-fluid：确保图片自适应容器宽度，不会超出边界，保持响应式特性。

额外优化（可选） #

如果希望移动端图片不要占满整个屏幕宽度，可以把图片容器的类改成：

<div id="home-img" class="col-md-6 col-8 mx-auto order-md-1 order-2">

col-8让移动端图片占8列宽度，mx-auto自动左右居中，视觉效果更协调。

这种方案完全遵循Bootstrap的设计理念，用内置类实现布局，后期维护和修改都很方便～

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