Conor Conor - 2 months ago 8
CSS Question

Change div Position on page size change

I want to create a div groups using bootstrap like this.

-------------------------------
| |
| |first div | | main | |
| | div | |
| |second div| | | |
| |
-------------------------------


So that on smaller screen it would looks like:

------------------
| |
| |first div | |
| |
| | main | |
| | div | |
| | | |
| |
| |second div| |
| |
------------------


Is it possible?

If yes, Then please guide me.

Answer

Try using this:

.col {
   float: left;
    margin: 20px;
    padding-bottom: 100px;
    margin-bottom: -100px;
}
.div-1{
    background: #ccc; 
}
.div-2{
    background: #ddd;
}
.div-3{
    background: #eee;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-3 col-xs-12 div-1 col">First Div</div>
    <div class="col-md-8 col-xs-12 div-2 col">Main Div</div>
    <div class="col-md-3 col-xs-12 div-3 col">Second Div</div>
  </div>
</div>

Check here for demo