Change div Position on page size change

Question

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.

make use of `@media` queries: http://www.w3schools.com/css/css_rwd_mediaqueries.asp — Sankar, Oct 05 '16 at 05:38

Sasuke91 · Answer 1 · 2016-10-05T06:23:50.133

As my understand If you want to change the direction like this, it is possible but a bit tricky with JavaScript.

So If I translate it into Bootstrap, it looks like so.

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

<div class="container">
    <div class="row">
        <div class="col-lg-8 col-xs-12">
            <div class="row">
                <div class="col-xs-12">
                    first div
                </div>
            </div>
            <div class="row">
                <div class="col-xs-12">
                    second div
                </div>
            </div>
        </div>
        <div class="col-lg-4 col-xs-12">
            main div
        </div>
    </div>
</div>

Then in mobile it will look like.

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

Bootstrap also provide col-pull and col-push but it is only applied to the item in the same row so this won't be the case unless the first div by somehow have the same height with the main div and we can group these two into a row.

Let me find the proper solution and come back soon :)

score 3 · Accepted Answer · edited Oct 05 '16 at 06:50

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

See whether it is helpful or not – Sagar Pednekar Oct 05 '16 at 06:38 — Sagar Pednekar, Oct 05 '16 at 06:38

score -1 · Answer 3 · answered Oct 05 '16 at 05:42

-1

WIth that strict position order, you need to use POSITION: ABSOLUTE and define the TOP LEFT WIDTH HEIGHT attributes. Then on CSS media query, reposition the TOP LEFT WIDTH HEIGHT according to your needs.

answered Oct 05 '16 at 05:42

Broken Arrow

576
3
12

How can i create the first one? I need two `.col-md-3` to be in a downwards. – Conor Oct 05 '16 at 05:56

Change div Position on page size change

3 Answers3