Bootstrap - 更改元素的顺序[重复]答案

【问题标题】：Bootstrap - change the order of element [duplicate]Bootstrap - 更改元素的顺序[重复]
【发布时间】：2018-03-18 14:44:16
【问题描述】：

我有两个带有 col-md-6 的 div。

我希望它更改为 col-xs-12 for mobile

但顺序应该是：

使用引导程序，我应该怎么做才能使盒子 B 放在盒子 A 的顶部

【问题讨论】：

只使用css？
使用引导
你试过使用flexbox的“order”属性了吗？
你在使用 Bootstrap V3 和 V4 吗？

标签： twitter-bootstrap css twitter-bootstrap-3

【解决方案1】：

尝试在 CSS 中使用 flexbox 的“order”属性。

默认情况下，弹性项目的显示顺序与它们在源文档中的显示顺序相同。 order 属性可用于更改此排序。

帮助您理解这一点的示例代码：https://jsfiddle.net/bhyqeq5x/

在上面的 JS fiddle 中，在 700px 以上，它呈现为 AB（正常行为）但在 700px 以下，我将 flex 框的方向更改为列，以便它显示在另一个下方并更改 A 和B 根据您的要求。

@media only screen and (max-width: 700px) {  
   .container {    
     flex-direction : column;  
   }  
   .A {
     order : 2;   
   }  
   .B {
          order : 1;
    } 
}

如果这对您没有帮助，请在下面的 cmets 中告诉我。

【讨论】：

哇，我以前不知道有这样的东西。谢谢！赞成
@KennethC ：在 CSS 中使用 flexbox 可以实现很多事情。尝试阅读css-tricks.com/snippets/css/a-guide-to-flexbox
@KennethC ：如果这对您有帮助，您能否将其标记为已接受的答案以帮助其他人？
我对 safari 有疑问。 :(
它有什么问题？可以放个截图什么的吗？

【解决方案2】：

您可以使用弹性容器对元素进行排序。

外部 div 设置为“display: flex;”并且内部元素得到一个命令。通过为元素 B 赋予 1 的顺序，为元素 A 赋予 2 的顺序。元素 B 将被放置在 A 之前，即使 A 在代码中位于首位。

这是我写的一段代码示例；

#flex-container{
    display: -webkit-flex; /* Safari */
    display: flex;
}

#a, #b{
  height: 200px;
  width: 200px;
}

#a{
  order: 2;
  background-color:#000;
}
#b{
  order: 1;
  background-color:#575757;
}
<div id="flex-container">
  <div id="a"></div>

  <div id="b"></div>
</div>

w3 学校也有一个很好的弹性订购演示在这里https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_order

【讨论】：

【解决方案3】：

如果您使用Bootstrap V4，只需在媒体查询中使用flex-direction: row-reverse;。

或者

如果您使用Bootstrap V3，只需在col-* 的媒体查询中使用float: right; 并按如下所示放置HTML

 <div class="col-xs-12 col-sm-6">B</div>
  <div class="col-xs-12 col-sm-6">A</div>

【讨论】：