How to dynamically adapt the layout by using only CSS

Question

Depending by the size of the app interface, I need to adapt dynamically the layout by using only CSS. It will be possible?

If the width of my app is 500px, I'd like to display the 3 containers in this way:

            | A   B |  // width 500px
            |   C   |

If the width of my app is 750px, I'd like to display the 3 containers in this way:

            |  A  B  C  | // width 750px

Here is the example.

By clicking on the button "change app size" you can change the size of the container.

Answer 1

With CSS media queries:

<link type="text/css" rel="stylesheet" href="style.css" />    
<link rel="stylesheet" media="screen and (max-width: 500px)" href="css/mobile-500.css" />
<link rel="stylesheet" media="screen and (max-width: 750px)" href="css/mobile-750.css" />