<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<div class="container">
<div class="row">
<section class='articles'>
<article>
<h2 class='article__title'>Responsive Anti-Patterns</h2>
<div class="article__date">Oct 22, 2013</div>
<p>You know, sometimes I just want to zoom out. I like the bird's eye view from time to time. Now that the web's gone all kinds of flexy, my poor little thumb just has to keep scrolling.</p>
<p>Your hamburger menu doesn't impress me much either. If there's space for some navigation items, why not just put them there?</p>
<p>Here's some code that might help you:</p>
<pre class='highlight'>
<code>* {
display:block;
}</code></pre>
</article>
</section>
<section class='articles'>
<article>
<h2 class='article__title'>The title</h2>
<div class="article__date">Oct 12, 2013</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque vel fugit quam necessitatibus quos eum laborum blanditiis consequatur enim aut. Sunt odit magnam vero odio tempore voluptatem animi facere culpa.</p> </article>
</section>
<section class='articles'>
<article>
<h2 class='article__title'>The title</h2>
<div class="article__date">Sep 20, 2013</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque vel fugit quam necessitatibus quos eum laborum blanditiis consequatur enim aut. Sunt odit magnam vero odio tempore voluptatem animi facere culpa.</p> </article>
</section>
<section class='articles'>
<article>
<h2 class='article__title'>The title</h2>
<div class="article__date">Sep 20, 2013</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque vel fugit quam necessitatibus quos eum laborum blanditiis consequatur enim aut. Sunt odit magnam vero odio tempore voluptatem animi facere culpa.</p> </article>
