smart page resizing

Suppose I have an HTML page with three blocks of fixed width (their height can vary if that's important), like shown on picture:

I would like to make it behave as shown on next picture: when browser screen width is reduced so it can't fit all three blocks in one line, first block goes down.

Is it possible to achieve such behavior? Preferably开发者_StackOverflow中文版 with CSS only but any working solution would be great.

<div style="width: 100%;">
    <div style="display: inline-block; background-color: red; width: 200px;">DIV2</div>
    <div style="display: inline-block; background-color: yellow; width: 200px;">DIV3</div>
    <div style="display: inline-block; float: left; background-color: lightBlue; width: 200px;">DIV1</div>
    <br style="clear: left;">
</div>

This one works. You put block 1 as the last one and only make that one float left.

It's virtually impossible to let the first block drop down without any Javascript trickery. Making the right-most one drop with float: left is easy on the other hand.

Use divs with float:left and fixed width values

        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
3
    </div>        
        <div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">
        2    
    </div>
<div style="float:right; width:250px; position:relative; height:100px; border:solid 1px #000000">    
        1
    </div>

like so... I am aware that the 1st one will go right but this is the simplest i can do without getting into javascript..

Put all these three blocks inside a div and set it's width to 100%, when the screen will resize the blocks will be arranged automatically.

<div style="width: 100%;">
  <div style="width: 50px; float left;">DIV1</div>
  <div style="width: 50px; float left;">DIV2</div>
  <div style="width: 50px; float left;">DIV3</div>
  <br style="clear: left;" />
</div>