Bootstrap - 更改元素的顺序

我有2个div与col-md-6。Bootstrap - 更改元素的顺序

我希望它变成COL-XS-12移动

但顺序应该是：

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

来源

2017-10-06 KennethC

给出由于只有使用CSS？ – xxLITxx

使用引导程序 – KennethC

您是否尝试使用flexbox属性“订单”？ –

您可以使用柔性容器来订购元素。

外部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

来源

2017-10-06 18:27:35 TidyDev

尝试使用Flexbox的的“命令”属性中的CSS。

默认情况下，Flex项目按照它们在源文档中显示的顺序显示。订单属性可用于更改此订单。

示例代码，以帮助您了解这一点：https://jsfiddle.net/bhyqeq5x/

在上面的JS小提琴，上述700像素，它呈现为AB（正常行为），但低于700像素，我改变柔性盒的方向列，因此它显示为一个在另一个之下并根据您的要求更改A和B的顺序。

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

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

来源

2017-10-06 18:47:04

哇，我不知道之前有这样的事情。谢谢！ upvoted – KennethC

@KennethC：在CSS中使用flexbox可以实现很多功能。尝试阅读https://css-tricks.com/snippets/css/a-guide-to-flexbox/ –

@KennethC：如果这对您有帮助，您能否将其标记为接受的答案以帮助未来的其他人？ –

如果您使用的是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>

来源

2017-10-06 18:48:06

Bootstrap - 更改元素的顺序

回答

相关问题