3 divs changing location based on screen size

Question

I would like to have 3 divs that normally are shown in the page like below

--------------
|     |      |
|  1  |      |
|     |   2  |
|-----|      |
|     |      |
|  3  |      |
|     |      |
--------------

so html will be something like

EDIT: I do think there is a better solution but to keep 1 and 3 on the left one after the other first thing you may do is placing them inside another div.

I do believe that doing so it will be impossible to solve the resize by the use of media queries only.

Is there a way to achieve the same visual result without the external container div?

<section class="content-wrapper main-content clear-fix">
                <div>
                    <div id="1" class="main-content-left float-left">
                        @RenderSection("leftBefore", required: false)
                    </div>
                    <div id="3" class="main-content-left-after float-left">
                        @RenderSection("leftAfter", required: false)
                    </div>
                </div>
                <div id="2" class="main-content-center float-left">
                    @RenderBody()
                </div>

            </section>

My goal is to have the left menu with a fixed width and the right are that uses the remaining space. If screen-size is reduced the divs should move in order to have something like below, possibly all centered.

Any advice?

    ---------
    |       |
    |   1   |
    |       |
    |-------|
    |       |
    |   2   |
    |       |
    |-------|
    |       |
    |   3   |
    |       |
    ---------

Answer 1

Use something like this...

HTML

<div class="wrap">
    <div class="right top"></div>
    <div class="left"></div>
    <div class="right bot"></div>
</div>

CSS

.wrap {width: 85%; margin: auto; overflow: hidden;}
.left {float: right; height: 510px; width: 49%; background: pink;}
.right {float: left; height: 250px; margin-bottom: 10px; width: 49%;}
.right.top {background: green;}
.right.bot {background: red;}
@media all and (max-width: 400px) {
    .left, .right {float: none; margin-bottom: 5px; height: 200px;}
}

Screenshots

Above 600px

Below 600px

Demo here: jsBin