如何使用bootstrap 3更改div顺序

Question

我使用的是bootstrap 3。我的问题是在较小的屏幕中更改一些div的顺序。

我的正常代码是：

<div class="container">
<div class="row">
<div class="col-md-6">
<p>A</p>
</div>
<div class="col-md-6">
<p>B</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>C</p>
</div>
<div class="col-md-6">
<p>D</p>
</div>
</div>
<div class="row">
<div class="col-md-6">
<p>E</p>
</div>
<div class="col-md-6">
<p>F</p>
</div>
</div>
</div>

输出为：

A B

C D

E F

我想要它在小屏幕(col-sm-12(如下

D

C

E

B

F

如何做到这一点？非常感谢。

Answer 1

您需要更改HTML并使用display: flex到.row，然后给.col下订单

@media (max-width: 1199px) {
.changeOrder {
display: flex;
flex-direction: column;
}
.changeOrder .one {
order: 1;
}
.changeOrder .two {
order: 2;
}
.changeOrder .three {
order: 3;
}
.changeOrder .four {
order: 4;
}
.changeOrder .five {
order: 5;
}
.changeOrder .six {
order: 6;
}
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="row changeOrder">
<div class="col-lg-6 one">
<p>A</p>
</div>
<div class="col-lg-6 five">
<p>B</p>
</div>
<div class="col-lg-6 three">
<p>C</p>
</div>
<div class="col-lg-6 two">
<p>D</p>
</div>
<div class="col-lg-6 four">
<p>E</p>
</div>
<div class="col-lg-6 six">
<p>F</p>
</div>
</div>

Answer 2

使用flex和order对元素进行排序。可以根据介质查询中的视口更改其子元素的顺序。

<div class="col-md-6 a">
A
</div>
<div class="col-md-6 b">
B
</div>
<div class="col-md-6 c">
C
</div>
<div class="col-md-6 d">
D
</div>
<div class="col-md-6 e">
E
</div>
<div class="col-md-6 f ">
F
</div>
</div>

CSS

.container {
display: flex;
flex-wrap: wrap;
} 
@media screen and ( max-width: 800px) {
.a {
order: 1;
}
.b {
order: 5;
}
.c {
order: 3;
}
.d {
order: 2;
}
.e {
order: 4;
}
.f{
order: 6;
}
}