Question

我有2个div与col-md-6。

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

但顺序应为：

使用bootstrap，我该怎么做才能将方框B放在方框A的顶部

Answer 1

尝试使用＆＃34; order＆＃34; CSS中flexbox的属性。

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

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

在上面的JS小提琴中，700px以上，它呈现为AB（正常行为）但低于700px，我正在将弹性框的方向改为列，使其看起来一个在另一个之下并改变A的顺序和B根据您的要求。

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

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

Answer 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

Answer 3

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

或者

如果您使用Bootstrap V3，只需在float: right;的媒体查询中使用col-*，然后按下面的说明放置HTML

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

Bootstrap - 更改元素的顺序

3 个答案: