Html 引导：在小屏幕中一列接一列地推动

在比mobile更大的显示器中，我希望具有以下配置（按此顺序）：

A列大2- B列大8- C列大2

在mobile中，我希望（在不同的行中）在第二列之后移动第一列：

B列大12- A列大6- C列大6

有人可以告诉我这是否可能，如果有，我该怎么办？谢谢

 <div class="container">
     <div class="row">
         <div class="col-lg-2"></div>
         <div class="col-lg-8"></div>
         <div class="col-lg-2"></div>
     </div>
 </div>

---

移动使用

col-*

：

在这里学习：

和使用顺序：

参见小提琴：

A.
B
C

如果要先执行

移动操作

，则应先按所需顺序定义HTML中的列：

<div class="container">
  <div class="row">
    <div class="col-12">
      B
    </div>
    <div class="col-6">
      A
    </div>
    <div class="col-6">
      C
    </div>
  </div> 
</div>

结果是：

---

请参见fiddle:

向您展示代码并解释您的问题我现在有了这些代码，但我不知道如何处理我想要的移动版本请参见我的答案问题是我必须（仅适用于移动设备）将第一列与第二列切换可能您在逻辑上非常接近，但不起作用：（你是什么意思不起作用？当？？描述问题时，无论是否使用所有代码“sm”（适用于移动设备）都是相同的，它显示我与以前一样写了问题：（抱歉编辑了几次，我想它上一版本见我的编辑

<div class="container">
  <div class="row">
    <div class="col-12 col-md-8 order-md-2">
      B
    </div>
    <div class="col-6 col-md-2 order-md-1">
      A
    </div>
    <div class="col-6 col-md-2 order-md-3">
      C
    </div>
  </div> 
</div>