Bootstrap - 改变元素的顺序

Question

我有 2 个 div，都带有 col-md-6。

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

但顺序应该是：

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

Answer 1

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

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

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

在上面的 JS 小提琴中，在 700px 以上，它被渲染为 AB（正常行为）但在 700px 以下，我将 flex 框的方向更改为列，以便它出现在另一个下方并按照每个更改 A 和 B 的顺序你的要求。

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

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