引导-更改元素的顺序

Question

我有两个div，都有-md-6。

​

​

我想把它换成xs-12的手机。

但命令应该是：

​

​

使用引导程序，我应该如何使方框B位于方框A的顶部

Answer 1

尝试在CSS.中使用柔性盒的"order“属性

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

帮助您理解以下内容的示例代码：https://jsfiddle.net/bhyqeq5x/

在上面的JS小提琴，700 per以上，它被渲染为A，B(正常行为)，但低于700 per，我正在改变弯曲盒的方向到列，使它出现在另一个下面，并根据你的要求改变A和B的顺序。

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

如果这对你没有帮助的话，请在下面的评论中告诉我。

Answer 2

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

外部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学校在这里也有一个很棒的flex订购演示，order

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