响应式三列布局：大屏b/a/c等宽，小屏a置顶+b/c分栏的标准实现咨询

你的思路确实能实现需求，但不属于Bootstrap这类响应式框架的标准实现方式哦。

为什么你的方案不是标准做法？ #

标准的响应式布局设计更倾向于用纯CSS能力（比如框架自带的响应式类、Flex/Grid布局）来实现，尽量避免用JavaScript操作DOM，原因有这几点：

• JS依赖DOM加载完成后执行，可能会出现页面加载时的布局闪烁问题；
• 纯CSS方案更简洁易维护，也不会遇到JS失效导致布局错乱的风险；
• 符合响应式设计"用CSS控制不同视口下的表现"的核心思路。

推荐的标准实现方式（以Bootstrap为例） #

利用Bootstrap的order-*响应式类和原生网格类，就能完全用CSS实现需求，不需要任何JS：

<div class="row">
  <!-- 元素b：大屏排第1位，小屏排第2位，小屏占8份宽度 -->
  <div class="col-xs-8 col-sm-4 order-sm-1 order-xs-2"> b </div>
  <!-- 元素a：大屏排第2位，小屏排第1位，小屏占整行 -->
  <div class="col-xs-12 col-sm-4 order-sm-2 order-xs-1"> a </div>
  <!-- 元素c：大屏/小屏都排第3位，小屏占4份宽度 -->
  <div class="col-xs-4 col-sm-4 order-sm-3 order-xs-3"> c </div>
</div>

这个方案的核心逻辑：

1. 用order-sm-*控制大屏（sm及以上）的元素顺序，order-xs-*控制小屏的顺序；
2. 直接通过col-xs-*和col-sm-*设置不同屏幕下的宽度，完全贴合Bootstrap的网格规范；
3. 父容器row默认已经是Flex布局，不需要额外添加Flex类即可生效。

总结 #

你的jQuery方案能实现功能，但属于JS辅助的非标准实现，更推荐用纯CSS的响应式类方案，这才是框架设计时预期的标准用法，也更符合响应式布局的最佳实践。

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