如何使用bootstrap将div div更改为verticals to divs order？

Question

我有4个div。 A，B，C，D水平，如何使用Bootstrap在移动视图上显示那些div A，C下一行然后B，D。

Answer 1

您可以使用flex订购

以下是示例

ul{
display: flex;
flex-wrap: wrap;
}

ul li{
  width: 100%;
  display: block;
}
ul li:nth-child(1){
  order: 1;
}
ul li:nth-child(2){
  order: 3;
}

ul li:nth-child(3){
	order: 2;
}

ul li:nth-child(4){
	order: 4;
}

<ul>
	<li>A</li>
	<li>B</li>
	<li>C</li>
	<li>D</li>
</ul>

对于手机，您可以使用宽度来并排显示项目。

Answer 2

col-xs-6 class to divs.Read oficial docs for more informatioms and break points。

Answer 3

您使用的是Bootstrap 3还是4？

对于3，您可能需要查看推/拉类 - https://getbootstrap.com/docs/3.3/css/#grid-column-ordering

在版本4中，这将被排序 - https://getbootstrap.com/docs/4.0/layout/grid/#reordering

取代