Css div responsive design

Question

I have 2 divs inside one container div:

<div class="container">
    <div class="left"></div>
    <div class="right"></div>
</div>

This is how it should work:

The right div should simply reduce in width if the window's width is reduced, whereas the left div should be responsive and have a minimum and maximum width. Stay to the right of the left div (within its min and max width)! The right div should be below the left div till the container div's width is less than the sum of the widths of the left and right divs!

According to the existing CSS, the green div should decrease in width by 200–500 pixels while still being to the right of the left div. The green div should only drop below the blue div if the container div's width decreases by more than 400 pixels (the combined width of the two divs).

Thank you!