Cacher is the code snippet organizer for pro developers

.c {
  padding: 1em;
}
@media screen and (min-width: 48em) {
  .main {
    width: 66.666666%;
    padding-right: 1em;
    float: left;
  }
  .sb {
    float: right;
    width: 33.333333%;
  }
}

<!--Pattern HTML-->
  <div id="pattern" class="pattern">
  	<div class="c">
			<div class="main">
				<h2>Here's the Main Content (1st in source order)</h2>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dictum odio eget mauris vestibulum feugiat. Praesent ante sapien, luctus pulvinar ultricies quis, aliquet in mi. Nulla facilisi. Donec malesuada fringilla iaculis. Praesent nec quam sit amet orci volutpat volutpat in eget eros. Duis pellentesque bibendum erat. Integer pretium nunc vel augue rutrum eget feugiat mi molestie. Cras venenatis, turpis et rhoncus scelerisque, mi augue suscipit urna, quis sagittis tortor nisl ut purus. Aliquam at enim est. Donec sit amet suscipit quam. Aliquam sit amet commodo eros.</p>
							</div>
			<div class="sb">
				<h3>Sidebar  (2nd in source order)</h3>
				<p>Sed sit amet molestie diam. Etiam adipiscing dictum eros, vitae feugiat augue convallis sit amet. Nunc quis massa non dolor dictum condimentum.</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque turpis diam, tincidunt nec convallis vitae, dapibus vitae enim. Nam bibendum nisl in risus imperdiet vestibulum.</p>
			</div>
		</div>
	</div>
	<!--End Pattern HTML-->
	
	<div class="container">	
		<section class="pattern-description">
			<h1>Main column with sidebar</h1>
			<p>A basic (and common) layout. A main column of text with sidebar stacked underneath. When space becomes available the sidebar displays next to the main column.</p>
		</section>
		<footer role="contentinfo">   
			<div>
				<nav id="menu">
					<a href="http://bradfrost.github.com/this-is-responsive/patterns.html">&larr;More Responsive Patterns</a>
				</nav>
			</div>
		</footer>