窗口Resize时如何调整div位置？Bootstrap 4布局问题求助

嘿，这个问题其实用Bootstrap 4原生的响应式顺序类就能完美解决，完全不需要复制元素或者折腾margin、display属性，既符合框架规范又简洁可靠。

核心思路：利用Bootstrap 4的order-*响应式类 #

Bootstrap 4的栅格系统基于Flex布局，order-*类可以直接控制Flex子项的排列顺序，配合断点前缀（如md-、sm-）就能实现不同屏幕宽度下的顺序切换。

具体实现步骤 #

假设你的HTML结构是这样的（基于典型的Bootstrap栅格）：

<div class="container">
  <div class="row">
    <!-- 左侧Div -->
    <div class="col-md-4 order-md-1 order-2">
      这里是左侧内容
    </div>
    <!-- 右侧Div -->
    <div class="col-md-8 order-md-2 order-1">
      这里是右侧内容
    </div>
  </div>
</div>

代码解释：

• order-md-1和order-md-2：在**md及以上屏幕（≥768px）**时，左侧Div排在第1位，右侧Div排在第2位，保持默认的左右布局。
• order-2和order-1：在**md以下屏幕（<768px）**时，左侧Div排在第2位，右侧Div排在第1位，实现左侧Div移到右侧Div下方的效果。

自定义断点适配 #

如果你的目标切换宽度不是默认的md断点，Bootstrap还支持其他断点前缀：

• xs-：超小屏幕（<576px）
• sm-：小屏幕（≥576px）
• lg-：大屏幕（≥992px）
• xl-：超大屏幕（≥1200px）

比如想在sm断点切换，就把order-md-*换成order-sm-*即可。

为什么你的之前尝试没生效？ #

你之前修改display、margin无效，是因为Bootstrap的row是Flex容器，子项的排列由Flex布局规则控制，手动设置margin或display会被Flex的优先级覆盖，而复制元素的方法不仅冗余，还会带来维护问题。用order-*类是最贴合Bootstrap设计思路的解决方案。

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