求助：Bootstrap 4的order-width-pos在移动端失效，桌面端正常

嘿，我来帮你搞定这个Bootstrap列排序的问题！你遇到的移动端失效情况，我之前也碰到过，大概率是没搞清楚Bootstrap 4响应式order类的用法~

首先得明确：Bootstrap 4的列排序是靠断点专属的order类来实现不同屏幕尺寸下的布局调整的。如果只给列加了不带断点的order-*，或者只加了针对大屏的order-md-*这类类，那切换到移动端时，列就会回到DOM里的默认顺序，这就是你遇到的问题啦。

问题核心原因 #

你可能只给列设置了大屏（比如md及以上）的排序规则，但没有为移动端（xs断点，Bootstrap 4里xs是默认最小断点）设置对应的排序值。举个例子，要是你只写了order-md-2，那只有在屏幕宽度≥768px时才会生效，移动端还是按HTML里的顺序排列。

解决办法：给列添加响应式order类 #

根据你的需求，给需要调整排序的列同时设置不同断点的order值就可以了。比如你想实现：大屏下A列在右侧，移动端A列在最上方，那代码可以这么写：

<div class="container">
  <div class="row">
    <!-- 移动端排第1，大屏排第2 -->
    <div class="col-md-6 order-1 order-md-2">
      我是A列：移动端在上，大屏在右
    </div>
    <!-- 移动端排第2，大屏排第1 -->
    <div class="col-md-6 order-2 order-md-1">
      我是B列：移动端在下，大屏在左
    </div>
  </div>
</div>

这里的order-1/order-2是针对xs（移动端）的排序，order-md-1/order-md-2是针对md及以上屏幕的排序，两者互不干扰，完美实现跨尺寸的列排序。

额外小技巧 #

• 如果你想让某列在某个断点下直接排最前/最后，可以用快捷类：order-md-first（等同于order-md-0）、order-md-last（等同于order-md-13），写起来更省事
• Bootstrap 4的order值范围是0到12，数字越小，列的位置越靠前

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