Bootstrap - 改变元素的顺序 [英] Bootstrap - change the order of element

问题描述

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

I have 2 divs both with col-md-6.

我希望它更改为用于移动设备的 col-xs-12

i want it to change to col-xs-12 for mobile

但顺序应该是:

使用bootstrap，我应该怎么做才能把盒子B放在盒子A的上面

using bootstrap, what should i do to make the box B on top of box A

推荐答案

尝试在 CSS 中使用 flexbox 的order"属性.

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

Flex items are displayed in the same order as they appear in the source document by default. The order property can be used to change this ordering.

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

Sample code to help you understand this : https://jsfiddle.net/bhyqeq5x/

在上面的 JS fiddle 中，高于 700px，它呈现为 AB(正常行为)但低于 700px，我将 flex 框的方向更改为列，以便它出现在另一个下方并更改 A 和B 根据您的要求.

In the above JS fiddle , above 700px , it is rendered as A B (normal behaviour)but below 700px , I am changing the direction of flex box to column so that it appears one below the other and changing the order of A and B as per your requirement.

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

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

Let me know in comments below if this doesnt help you.

这篇关于Bootstrap - 改变元素的顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！