title: How to position the 3 divs in one column when the browser's width is resized?
body: <p>I have a 3 column layout in my HTML which looks like this</p>
  
  <pre><code>[ [leftdiv]     [centerdiv]      [rightdiv] ]
  </code></pre>
  
  <p>I'm not really a UI guy so I need help to deal with this stuff in css
  for responsive design. The HTML layout below represents the above sketch.</p>
  
  <pre><code>   &lt;div class="container"&gt;
  
          &lt;div class="leftdiv" style="width:25%;height:auto;float:left; background-color:white"&gt;            
  
          &lt;/div&gt;
  
          &lt;div class="centerdiv" style="width:50%;height:auto;float:left; background-color:white"&gt;
  
          &lt;/div&gt;
  
          &lt;div class="rightdiv" style="width:25%;height:auto;float:right;background-color:white;margin-top:15px"&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>I need to make my 3 column divs to be responsive based on the screen width of the browser. So let's say if I resize
  my browser's width to a lesser width like a screen width of a smart phones or tablet, the 3 divs should realign themselves
  relatively like this below</p>
  
  <pre><code>[
  
   [leftdiv]   
  
   [centerdiv]  
  
   [rightdiv] 
  
  ]
  </code></pre>
  
  <p>How do I achieve this? Thanks</p>