title: Responsive design - 2 column down to one column
body: <p>I have 2 divs floated left so they will appear inline</p>
  
  <pre><code>&lt;div class==".container" style="width: 100%"&gt;
      &lt;div class="leftColumn" style="width: 50%; float:left"&gt;
          test
      &lt;/div&gt;
  
      &lt;div class="rightColumn" style="width: 50%; float:left"&gt;
          test
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>When the screen falls below 400px I want the divs to appear underneath each other
  My current media query</p>
  
  <pre><code>@media(max-width: 400)
  {
      .leftColumn{background-color: Red; float: none}
      .rightColumn{background-color: Blue; float: right} 
  }
  </code></pre>
  
  <p>Thanks to anyone who can help</p>