James Bailey James Bailey - 1 year ago 76
Javascript Question

List with responsive shifts

I have an un-ordered list that looks like this on a full size page:

Item 1
Item 2
Item 3
Item 4
Item 5 <some content here>
Item 6
Item 7
Item 8
Item 9

But I want it to go to:

Item 1 Item 4 Item 7
Item 2 Item 5 Item 8
Item 3 Item 6 Item 9

<some content>

at 100% width of a phone.

I have the list and "other content" in divs doing what I need, but in regards to the list, should I use tables, or is there CSS that I can use with an un-ordered list?

Answer Source

try this code

       ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            flex-wrap: wrap;
            height: 300px;
            width: 100%;

        li {
            flex: 1;
            min-height: 100px;



        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <li>Item 6</li>
        <li>Item 7</li>
        <li>Item 8</li>
        <li>Item 9</li>


adjust the height of ul and li to fit your design needs

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download