我有两个div,
<div class="col-md-6"> First Content </div>
<div class="col-md-6"> Second Content </div>
当它是全屏时,我想先显示“第一内容”,再显示“第二内容”,但当屏幕尺寸较小时,我想先显示“第二内容”,在它下面是“第一内容”。
有办法吗? 我想用原始css或引导程序实现这一点。
我认为您正在寻找的答案是使用flex-wrap:wrap-reverse.
如下所示:
null
#wrapper{
display: flex;
flex-wrap: wrap;
text-align:center;
}
.first, .second{
width: 400px;
margin: auto;
height:400px;
}
.first{
background: red;
}
.second{
background:yellow;
}
@media only screen and (max-width:500px){
#wrapper{
flex-wrap:wrap-reverse;
}
}
<div id="wrapper">
<div class="first">First</div>
<div class="second">Second</div>
</div>