重新订购Bootstrap 4网格

Question

我想要一个布局：

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

我似乎已经设法了，请看下面的抓斗：

代码：

<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个 - 它可以随意包装 - 这样可以吗？ BTW这个网格所在的容器的最大宽度为1100。

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

Answer 1

是的，它是完全有效的Bootstrap，因为......

  

＆＃34;如果在一行中放置了超过12列，则每组都有   额外的列将作为一个单元包裹到一个新行上。＆＃34;

http://getbootstrap.com/docs/4.1/layout/grid/#column-wrapping

只需要根据需要使用order-*类，最大值为12。如果您在一行中有12个单独的列单元，则仅使用全部12个。

要优化order-*的使用，您只需要撤消md上的第2和第3列。第一个呼叫保持其自然顺序，因此它不需要特定的order-*类。您可以使用任意两个order-md-*类作为＆＃34;按钮广告＆＃34;小于＆＃34;类别＆＃34;。

<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> 

https://www.codeply.com/go/DZfhbAyEUL

Answer 2

<强> A

是的，这是对的。 Extra columns wraps onto a new line。

<强>乙

  

您可以按断点设置顺序（例如.order-1.order-md-2）。包括在所有五个网格层中支持1到12。 - bootstrap-4

您已正确使用order-*个类。但是，由于您不更改first列的顺序，因此不应使用oder-*类。对order-md-1和Button ads列order-md-last使用Catigories：非常多。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<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-last">
    Categories
  </div>
  <div style='background-color: #ddd;' class="col-md-8 order-md-1">
    Button ads
  </div>
</div>

https://codepen.io/anon/pen/rKMEbY

另一种解决方案是重新排序移动设备的列。

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet"/>
<div class="row">
  <div style='background-color: #ccc;' class="col-12 col-md-4 ">
    Call to Actions
  </div>

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

https://codepen.io/anon/pen/OEReYP

更新

您不必将order-12用于最后一列。如果你有3列，那么最后一列使用order-md-3是完全没问题的。或者，如果您有四列，则为第四列order-md-4。如果您的列少于13列，则order-12和order-last具有相同的function。这只是将order-12或order-last用于最后一列的安全方式。为了便于阅读，请使用order-md-0或order-first作为第一个column。

order-*班级使用css-order。在MDN上阅读相关内容。