提问者:小点点

使用css动态更改内容位置


我有两个div,

<div class="col-md-6"> First Content </div>
<div class="col-md-6"> Second Content </div>

当它是全屏时,我想先显示“第一内容”,再显示“第二内容”,但当屏幕尺寸较小时,我想先显示“第二内容”,在它下面是“第一内容”。

有办法吗? 我想用原始css或引导程序实现这一点。


共1个答案

匿名用户

我认为您正在寻找的答案是使用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>