CSS Two Columns of Lists - responsive merge into one column

css, html, responsive-design

Solution

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.

Problem

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/

Original source