Bootstrap Altering a child div in a row - css

Question

Here is my 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>
Here is my css:
.row div{
height: 100px;
}
.div1{
background: blue;
}
.div2{
background: red;
}
.div3{
background: darkcyan;
}
.div4{
background: cyan;
}
Its ok in normal view
Is it possible to alter div4 with div3 on mobile view like below image

Answer 1

You can swap the color of div3 and div4 using media query for mobile 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>