Move middle div down if window gets smaller

Question

I have three divs side by side. If the browser window gets smaller, I want the middle div to move down below the first div, and the right div to move to the "middle".

For a better understanding, I made the following plan

Can someone tell me how you do it?

Answer 1

This jsfiddle should get started. I forked the Candlejack fiddle and tried to provide only a css solution.

Basically you put the second div last:

<section id='container'>
  <div id='box-1' class='myBox'>1</div>
  <div id='box-3' class='myBox'>3</div>
  <div id='box-2' class='myBox'>2</div>
</section>

Then you float div-1 and div-2 to the left, while div-3 floats to the right, div-1 and div-3 have a display: block; while display div-2: built-in unit;

#container { display:inline-block; width:100%; padding: 0.5em 0; border: 1px solid black;}
.myBox { display:inline-block; min-height: 100px; width:300px; margin: 0.5em 0 0.5em 3%; float:left; display: block; }
#box-1 { border:1px solid blue;}
#box-2 { border:1px solid red; display: inline-block; float: left;}
#box-3 { border:1px solid green;float:right;}

Answer 2

, , , . http://jsfiddle.net/bd9yczqq/3/

[        <div><div class="box first"></div>
<div class="box middle"></div>
<div class="box last"></div></div>

.box{
width:200px;
    height:200px;
    float:left;
    border:1px solid #999;
    margin:5px 1%;
    background-color:#ccc;

}
.middle{

   float:right;
}

.last{
background-color:red;
}]

Answer 3

Use relative positioning in your css for your divs and float them. Example:

position:relative;
float:left;