css - Bootstrap 连续改变子 div

Question

这是我的 html:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 div1">DIV1</div>
    <div class="col-sm-6 div2">DIV2</div>
    <div class="col-sm-6 div3">DIV3</div>
    <div class="col-sm-6 div4">DIV4</div>
   </div>
</div>

这是我的CSS:

.row div{
  height: 100px;
}
.div1{
  background: blue;
}
.div2{
  background: red;
}
.div3{
  background: darkcyan;
}
.div4{
  background: cyan;
}

普通 View 下没问题 是否可以在移动 View 上使用 div3 更改 div4，如下图所示

Answer 1

您可以使用移动媒体查询交换 div3 和 div4 的颜色 min-width: 767px

.row div{
  height: 100px;
}
.div1{
  background: blue;
}
.div2{
  background: red;
}
.div3{
  background: darkcyan;
}
.div4{
  background: cyan;
}

@media(max-width:767px){
  .div3{
    background: cyan;
  }
  .div4{
    background: darkcyan;
  }

}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 div1"></div>
    <div class="col-sm-6 div2"></div>
    <div class="col-sm-6 div3"></div>
    <div class="col-sm-6 div4"></div>
   </div>
</div>