Bootstrap 连续更改子 div答案

【问题标题】：Bootstrap Altering a child div in a rowBootstrap 连续更改子 div
【发布时间】：2016-09-19 17:55:11
【问题描述】：

这是我的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;
}

正常看没问题是否可以在移动视图上使用 div3 更改 div4，如下图所示

【问题讨论】：

在你的 div 中使用 width:100% !important css 属性。
看到青色在移动视图的第三个位置
@nikolas Think mobile 首先放置“div4-cyan” div，然后是“div3-darkcyan”，然后使用 pull & push 类。可以查看this和fiddle

标签： css twitter-bootstrap-3

【解决方案1】：

你可以在html中这样使用：

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6 div1">DIV 1</div>
    <div class="col-sm-6 div2">DIV 2</div>
    <div class="col-sm-6 div3 col-sm-push-6">DIV 3</div>
    <div class="col-sm-6 div4 col-sm-pull-6">DIV 4</div>
   </div>
</div>

【讨论】：

【解决方案2】：

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

.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>

【讨论】：

谢谢。还有什么技巧吗？真的我想改变整个 div 内容。