Div structure with responsive design

Question

I´m trying to float 3 divs in different order in responsive design. In mobile version is correlative (div 1, div 2, div 3) but in desktop version I want to place the div 3 near the div 1 and the div 2 at bottom of them. I´m triying it with float, clears and so but I dont know how fix it. I share a mockup. can help me anyone? Thanks

_{(source: subirimagenes.com)}

This is the html structure:

<div id="fondo-web">

<div id="main">

    <section id="main-container" name="div1">
        Random Image
    </section>

    <section id="cadiz-a-caballo" name="div2">
        Copy Text           
    </section>

    <section id="frm-container" name="div3">
        Contact Form
    </section>


</div>

</div>

In example, this is one attempt:

#main-container{
    width:33%;
    background-color:#856;
    float:left;
}

#cadiz-a-caballo{
    width:33%;
    background-color:#376;
}

#frm-container{
    width:30%;
    background-color:#856;
    float: right;
}

And other attempt with absolute positioning and margin-bottom for the father container:

#main-container{
    width:62%;
    background-color:#856;
    float:left;
}

#cadiz-a-caballo{
    width:70%;
    position: absolute;
    background-color:#376;
    top:600px;
}

#frm-container{
    width:35%;
    background-color:#856;
    float: right;

}
#main{
    width:75%;
    margin:auto;
    margin-bottom: 150px;
    overflow: hidden;
    background-color: #343;
}

Answer 1

This is more or less what you want: http://jsfiddle.net/uyQzQ/1/

First of all you want to make the first div to a certain percentage of its parent:

#main-container{
    width:65%;   
}

This will leave space for the 3rd div to fall into later.

Then you want the second div to be the full width of the parent:

#cadiz-a-caballo{
    width: 100%;
}

Finally you want to position the 3rd div in the space left to the right of the first div. To do this you need to position the parent so absolute positioning of the 3rd div will be relative to the parent, not the document:

#main{
   position: relative;
}

Now, you just need to set the width of the 3rd div to the size of the space that is left, and then position it in the top right of the parent.

#frm-container{
    width:35%;
    position: absolute;
    top: 0;
    right: 0;
}

I've not included any margin between each element. You can adjust the widths to take this into account to add those margins.

The main issue with this approach is that the 3rd div needs to be the same height or shorter than div 1, otherwise as div 3 is out of the flow of the document, it will display on top of div2 as well (and any content below that too if long enough).