title: CSS to dynamically create columns
body: <p>I have three <code>&lt;div&gt;</code> elements:</p>
  
  <pre><code>&lt;div class="foo"&gt;A&lt;/div&gt;
  &lt;div class="foo"&gt;B&lt;/div&gt;
  &lt;div class="foo"&gt;C&lt;/div&gt;
  </code></pre>
  
  <h3>Desired behavior</h3>
  
  <p>I'd like to write some CSS to create the following effect as the screen size changes:</p>
  
  <p><img src="https://i.stack.imgur.com/KtUyg.png" alt="enter image description here"></p>
  
  <h3>Undesired behavior</h3>
  
  <p>I know how to implement the following (undesired) behavior:</p>
  
  <p><img src="https://i.stack.imgur.com/4apAL.png" alt="enter image description here"></p>
  
  <pre><code>div.foo {
     display: inline-block;
     vertical-align: top;
     width: 300px;
  }
  </code></pre>
  
  <p>Is there a simple way (pref. without any Javascript library) to achieve my desired behavior that will work on major browsers (Chrome, Safari, Firefox, IE9+)? </p>