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.
<div>
<ul class="left">
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
<li>Item D</li>
</ul>
<ul class="right">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
So the result should look like this on small screens.
Item A
Item 1
Item B
Item 2
Item C
Item 3
Item D
Item 4
Here is my starting jsfiddle. Should I instead make one list with li
width
set to 50%
? I wanted to see if this was possible while keeping the HTML markup the way it is.