Question: I've been trying to achieve this for hours and I'm not quite getting it to work, so here it goes nothing:

I have this site:[Site HomePage](http://i.stack.imgur.com/sH5g3.jpg)

composed by this HTML elements:

```
    <div id="headerwrap">
        <div id="header">
        </div>
    </div>

    <div id="navigationwrap">
        <div id="navigation">
        </div>
    </div>

    <div id="midcontentwrap">
        <div id="leftwrap">
            <div id="left">

            </div>
        </div>

        <div id="midwrap">
            <div id="midleft">

            </div>
            <div id="midright">

            </div>
        </div>

        <div id="rightwrap">
            <div id="right">

            </div>
        </div>

    </div>
</div>

```

What I need is: 
- When the browser window is resized, either **left** and **right columns** stay where they are and the **MID COLUMN RIGHT SIDE** needs to go below **MID COLUMN LEFT SIDE**.
My CSS file is pretty simple by now and this is the only major thing I need to do as the window size changes.

Thanks in advance for any help.

Answer: 
Yep, you're going to want to use media queries. Here's a [JSFiddle](http://jsfiddle.net/UeZZf/1/) of it in action.

Resize the display iFrame of the Fiddle back and forth past 500px width to view the results. I spruced up your HTML a little, too, to make it more modern (sorry):

HTML:

```
<section class='contentWrap'>
    <aside>
        This element corresponds to the element on the far left of the image you linked to.
    </aside>

    <div class='mainContent'>
        <article class='left'>
            This element corresponds to the mid-left element in the image you linked to.
        </article>
        <article class='right'>
            This element corresponds to the mid-right element in the image you linked to.
        </article>
    </div>

    <nav>
        This element corresponds to the element on the far right side of the image you   linked to.
    </nav>

</section>

```

CSS:

```
.contentWrap {
    width: 100%;
}

.contentWrap aside {
    display: inline-block;
    width: 25%;
    height: 200px;
    border: 1px solid purple;
}

.mainContent {
    display: inline-block;
    width: 45%; /* only because the borders are upsetting the percantages */
    height: 200px;
    border: 1px solid gray;
    vertical-align: top;
}

.mainContent article {
    border: 1px solid #00cae9;
    margin-bottom: 2px;
}

.contentWrap nav {
    display: inline-block;
    width: 25%;
    height: 200px;
    border: 1px solid orangered;
    vertical-align: top;
}

@media screen and (min-width: 500px) {
    .contentWrap {
        width: 500px;
        margin: 0 auto;
    }

    .mainContent article {
        display: inline-block;
        width: 47%;
        vertical-align: top;
    }
}

```

NB: if you're viewing it on a super small screen, it won't work; that's JSFiddle's problem.
> 
> To solve this problem....use `%` value for all `div id` width
> 
> 
>