Left-floated div place below another div [duplicate]

Question

I have two divs whereas (div 1) is floated left while (div 2) is floated right. I am creating a responsive layout where when the viewport changes, (div 1) will go under (div 2). I created a simple image via MS Paint for an easier illustration and also some code. Also, both contain dynamic content so their heights must not be fixed.

No javascript (if possible) just plain CSS. I only know how to put div 2 under div 1 but not the other way around.

Does anyone know how I could achieve this?

HTML:

 <div id="div1 sidebar" style="float: left;">
   //dynamic content
 </div>

 <div id="div2 content" style="float: right;">
  //dynamic content
 </div>

HTML is auto generated so in the markup, div1 originally comes first than div2. Not advisable to change the order (place div2 above div1) since many pages use the same layout. See code above

Answer 1

There is my proposition. Using media queries, find the largest width that you want your divto stay side by side.

In your html, place your div like this (the right one before):

<div class="div2">
    div 2
</div>
<div class="div1">
    div 1
</div>

The css used to display those div should look like this:

.div1 {
    float: left;
    width: 25%; 
}
.div2 {
    float: right;
    width: 75%;
}

Finally, to display your left div below the right one, your should add in you css something like this:

@media all and (max-width: 480px) {
    .div1, .div2 { 
        float: none;
        display: block; 
    }
}

Here is a jsfiddle that demonstrate this coding. You only have to resize your browser to see your left div going right under your right one.