title: CSS inline divs using media queries to make responsive
body: <p>I have this CSS code:</p>
  
  <pre><code>.wrap div {
      border: 1px solid #f36f25;
      width: 30%;
      float: left;
      margin:10px;
      padding:5px;
  }
  .clear:after {
     content: "";
     display: table;
     clear: both;
  }
  @media all and (max-width: 800px) {
      div.wrap div {
          width: 100%;
          float: none;
      }
  }
  </code></pre>
  
  <p>which I'm using to display divs inline and using media queries, to make them responsive.</p>
  
  <p>As the screen gets smaller, the 3rd div displays underneath the others, how can I make it fully responsive so that they all display underneath each other at the same time.</p>
  
  <p>I would also like all 3 to be <code>width: 100%;</code> if the screen is too wide they display more of the left side than the centre.</p>
  
  <p>Updated fiddle: <a href="http://jsfiddle.net/a8k16vts/2/" rel="nofollow">http://jsfiddle.net/a8k16vts/2/</a></p>
  
  <p>I would also like to display 3 divs inline, then under those 3, one div under the first and then a larger div to fit under the second two divs. Like so: <a href="http://jsfiddle.net/a8k16vts/3/" rel="nofollow">http://jsfiddle.net/a8k16vts/3/</a></p>