title: how to set up responsive columns with pure CSS?
body: <p>I'm using the following HTML markup to make 3 columns in my page:</p>
  
  <pre><code>&lt;div id="container"&gt;
       &lt;div id="sidebar-left"&gt;&lt;/div&gt;
       &lt;div id="content"&gt;&lt;/div&gt;
       &lt;div id="sidebar-right"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>These columns are styled with this CSS:</p>
  
  <pre><code>#container{width:100%}
  #sidebar-left, .sidebar-right{width:25%;float:left}
  #content{width:50%;float:left}
  </code></pre>
  
  <p>The output result is similar to the left image at &lt;1200px width.</p>
  
  <p><a href="https://i.stack.imgur.com/VEopK.jpg" rel="nofollow noreferrer">https://i.stack.imgur.com/VEopK.jpg</a></p>
  
  <p>Now i'm trying to make a responsive design for widths less than 1200px, similar to the right image, but i can't get the content DIV on top of the sidebars. I've have tried to change the order of DIVs, but no help. </p>
  
  <p>Is there anyway to do this?</p>