title: CSS Responsive two column with multi rows into one column
body: <p>I'd link an image but I don't have an image gui program on this computer.</p>
  
  <p>So, what is the best approach to get the following to happen. </p>
  
  <pre><code> COLUMN 1 title     COLUMN 2 TITLE
   COLUMN 1 PIES      COLUMN 2 SNEAKERS
   COLUMN 1 TIRES     COLUMN 2 GUITARS
  </code></pre>
  
  <p>And when the screen is minimized, it changes to the following structure.</p>
  
  <pre><code> COLUMN 1 title     
   COLUMN 2 TITLE
   COLUMN 1 PIES      
   COLUMN 2 SNEAKERS
   COLUMN 1 TIRES     
   COLUMN 2 GUITARS
  </code></pre>
  
  <p>The columns basically zip up. What do you feel is the best approach here, to accomplish what I need? CSS is not my forte. Flex ordering?</p>