nikolas nikolas - 2 months ago 5
CSS Question

Bootstrap Altering a child div in a row

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
Normal view
Is it possible to alter div4 with div3 on mobile view like below image
enter image description here

Answer

You can use like this in 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>
Comments