CSS Two Columns of Lists - responsive merge into one column - html

Question

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.
http://jsfiddle.net/aAhX9/

Answer 1

The only way to do this (outside of some very laborious positioning) is to combine the elements into a single list, giving each li a class-name and styling them appropriately:
<div>
<ul>
<li class="left">Item A</li>
<li class="right">Item 1</li>
<li class="left">Item B</li>
<li class="right">Item 2</li>
<li class="left">Item C</li>
<li class="right">Item 3</li>
<li class="left">Item D</li>
<li class="right">Item 4</li>
</ul>
</div>
li {
list-style-type: none;
width: 50%;
}
li.left {
float: left;
background-color: #0f0;
}
li.right {
float: right;
background-color: #00f;
}
#media only screen and (max-width: 480px) {
.left, .right {
float: none;
width: 100%;
}
}
Updated JS Fiddle demo.
As noted by Hashem, in the comments below, it would be possible to use the :nth-child() selector, rather than class-names, to style the various li elements left, or right:
li:nth-child(odd) {
float: left;
background-color: #0f0;
}
li:nth-child(even) {
float: right;
background-color: #00f;
}
#media only screen and (max-width: 480px) {
li {
float: none;
width: 100%;
}
}
Updated JS Fiddle demo.

Answer 2

You can't do that with two ul. However, you can put two span in each li.
Example:
HTML:
<div>
<ul>
<li><span class="left">Item A</span><span class="right">Item 1</span></li>
<li><span class="left">Item B</span><span class="right">Item 2</span></li>
<li><span class="left">Item C</span><span class="right">Item 3</span></li>
<li><span class="left">Item D</span><span class="right">Item 4</span></li>
</ul>
</div>
CSS:
ul{
list-style: none;
margin: 0;
padding: 0;
}
span{
width: 50%;
}
.left {
float: left;
background:blue;
}
.right {
float: right;
background:Red;
}
#media only screen and (max-width: 480px) {
.left, .right {
float: none;
width: 100%;
display:blocK;
}
}
JSFiddle