Typically, a design like this might be marked up something like the following (simplified):
<header>…</header>
<section id=”main-content”>
<article>…</article>
<article>…</article>
</section>
<aside id=”sidebar-content”>
<div id=”ads”>…</div>
<div id=”newsletter”>…</div>
</aside>
<footer>…</footer>
This, however, puts the columns into “boxes” that don’t allow you to reflow the content. To solve this, you’ll
need to make each piece of content its own box:
<header>…</header>
<article>…</article>
<aside id=”ads”>…</aside>
<article>…</article>
<aside id=”newsletter”>…</aside>
<footer>…</footer>
This markup resembles what a single-column layout should look like: Lead with an entry, then show ads,
then show another entry, and then show the newsletter signup. In the future, additional entries will flow beneath
the newsletter.
Now you can use media queries to arrange the content into two columns when the screen is wide enough, but
stack content in an acceptable order when it’s not.
Content Reflowing with Media Queries
To get the content to display properly, start with the smallest screen size. Nothing special about the markup; just
some basic styles:
article {
position: relative;
margin: 0 0 2em;
overflow: hidden;
}
aside {
margin: 1.5em 0;
padding: 1.5em 0;
border-top: 1px dashed #955240;
border-bottom: 1px dashed #955240;
}

then, when the screen is wide enough, additional styles are applied to break the content into two columns. For
this example, the media query that applies these rules is set to match any screen smaller than 768 pixels, which
is a common tablet resolution.
the styles aren’t anything too crazy: blog entries are floated left, and sidebar content is floated right, which
arranges the content into two columns:
@media screen and (min-width: 768px) {
article {
position: relative;
float: left;
width: 55%;
margin: 0 3% 2em 0;
}
aside {
float: right;
width: 42%;
margin: 0 0 2%;
padding: 0;
border: none;
}
}