title: CSS Two Columns of Lists - responsive merge into one column
body: <p>I have two lists that I'm floating into two columns. I want to make it so on small screens, the items become one column, BUT I'd like to alternate the items.</p>
  
  <pre><code>&lt;div&gt;
      &lt;ul class="left"&gt;
          &lt;li&gt;Item A&lt;/li&gt;
          &lt;li&gt;Item B&lt;/li&gt;
          &lt;li&gt;Item C&lt;/li&gt;
          &lt;li&gt;Item D&lt;/li&gt;
      &lt;/ul&gt;
      &lt;ul class="right"&gt;
          &lt;li&gt;Item 1&lt;/li&gt;
          &lt;li&gt;Item 2&lt;/li&gt;
          &lt;li&gt;Item 3&lt;/li&gt;
          &lt;li&gt;Item 4&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So the result should look like this on small screens.</p>
  
  <pre><code>Item A
  Item 1
  Item B
  Item 2
  Item C
  Item 3
  Item D
  Item 4
  </code></pre>
  
  <p>Here is my starting jsfiddle. Should I instead make one list with <code>li</code> <code>width</code> set to <code>50%</code>? I wanted to see if this was possible while keeping the HTML markup the way it is.</p>
  
  <p><a href="http://jsfiddle.net/aAhX9/" rel="noreferrer">http://jsfiddle.net/aAhX9/</a></p>