Bootstrap 4 重新订购引导4网格

我想要一个这样的布局：

Mobile (< col-md)

"Call to Actions" displays as one row 100% wide
"Categories" displays as one row 100% wide
"Button ads " displays as one row 100% wide

PC (> col-md)

"Call to Actions" & "Button ads"  displays as one row 100% wide between them and 1 to 2  width ratio
"Categories" displays as one row 100% wide

Mobile（col md）
“行动号召”和“按钮广告”显示为一行，两行之间的宽度为100%，宽度比为1:2
“类别”显示为一行100%宽

我似乎已经做到了这一点，请参见下面的抓图：

代码：

<div class="row">

  <div style='background-color: #ccc;' class="col-md-4 order-md-1">
   Call to Actions
  </div>

  <div style='background-color: #eee;' class="col-md-12 order-md-12">
   Categories
  </div> 

  <div style='background-color: #ddd;' class="col-md-8 order-md-2">
     Button ads       
  </div> 

</div> 

行动呼吁
类别
按钮广告

问题

A） 我在一行中有三列，总计24列-它按我所希望的方式包装-这样可以吗？顺便说一句，该网格所在的容器的最大宽度为1100

---

B） 我看到的大多数排序示例都是从order-xx-1到order-xx-12，对于3列，我可以只使用1,2,3吗？似乎工作正常。

是的，这是完全有效的引导，因为

如果一行中放置的列超过12列，则每组 额外的列将作为一个单元包装到新行上。”

而且，

order-*

类只需在需要时使用，12是最大值。如果一行中有12个单独的列单元，则只能使用所有12个

要优化使用

order-*

，只需反转

md

上的第2列和第3列即可。第一个调用保持其自然顺序，因此不需要特定的

顺序-*

类。您可以使用任意两个

order md-*

类，因为“按钮广告”小于“类别”

行动呼吁
类别
按钮广告

A

是的，它是正确的

B

您可以通过断点设置顺序（例如，order-1.order-md-2）。包括对所有五个网格层的1到12的支持。-

您已经正确地使用了

order-*

类。但是，由于不更改

第一列的顺序，因此不应使用
order-*
类。对
按钮广告使用
order-md-1
，对
类别使用
order-md-last



行动呼吁
类别
按钮广告
你有没有试过手机用col-xs-12 col-sm-6 col-md-3（xs->超小型）平板电脑用整行（sm->小型）用50%的宽度，md（笔记本电脑或大屏幕）用30%的屏幕..没有，我只是试过上面的代码，它似乎能满足我的要求，只是检查它是否有效。我不希望“行动号召”在桌面上占50%，33%是fine@aloketBootstrap 4中没有
列xs
。谢谢@Klooven更新我…：D@aloket谢谢你。我刚才问的问题B，当我只有3列时，我是否需要在订单12上结束。为了可读性，即使不需要，也给第一列指定一个顺序有什么害处吗？谢谢，两个非常好的回答者，我接受了另一个，因为那是第一个。
<div class="row">
      <div style='background-color: #ccc;' class="col-md-4">
       Call to Actions
      </div>
      <div style='background-color: #eee;' class="col-md-12 order-md-2">
       Categories
      </div> 
      <div style='background-color: #ddd;' class="col-md-8 order-md-1">
      Button ads       
      </div> 
</div>