title: CSS dynamic two column layout
body: <p>I need to create following layout using css</p>
  
  <p>===== MOBILE ===== ===== ON DESKTOP ======</p>
  
  <p>-----[1]-----&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----[1]-----|-----[4]-----<br>
  -----[2]----- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----[2]-----|-----[5]-----<br>
  -----[3]----- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;-----[3]-----|-----[6]-----<br>
  -----[4]----- <br>
  -----[5]----- <br>
  -----[6]----- <br></p>
  
  <p>===== MOBILE ==== ===== ON DESKTOP==== </p>
  
  <p>They above layout DOM structure will be as per the mobile layout order and also it is dynamic, if I removed [2] from the DOM [3] should take place of [2] not the [5]. How can I create a css layout with these condition is it possible to create with css?</p>