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

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.