Displaying Lists Mobile Friendly

[james_09]

I'm slowly getting round to converting my site to mobile responsive, but I am having trouble with two lists on my homepage.

My home page currently has two columns of information which act like a news feeds, with a title, image and snippet of the text linking to the main article. These are organised in date order i.e. the latest posts alternate between the top of the two columns.

The two columns are set up as two separate divs, with the posts contained within an unordered list. i.e. each post is contained within a separate <li>. The problem I have is that when viewed on mobile the two columns stack one above the other (which I want), but the whole of the left hand div is displayed first, followed by the whole of the right hand div.

I would like the data contained in each <li> to alternate from the left column and the right column when viewed on mobile.

i.e. on mobile it would display in the following order:-

1st <li> from left hand div
1st <li> from right hand div
2nd <li> from left hand div
2nd <li> from right hand div
3rd <li> from left hand div
3rd <li> from right hand div
e.t.c.

I have no idea how to do this and would appreciate any ideas.

Thanks

[not2easy]

How about converting the <li> s to <div> s and assign behaviors for the classes? As long as they are <li> within a <ul> I am not sure that you can alternate their display that way. Are the lists dynamically generated (using RSS or a script)? If so, can their format be altered? Do you have a way to assign alternating classes to entries?

[james_09]

Thanks for your reply. No they are not dynamically created, although I could easily add classes to each <li>.
I could also change them to divs, which would require a little more work, but do able.

If I set up classes, do you have a rough idea of the CSS I would need to use to get them to organise alternatively in mobile?

[not2easy]

Sorry, I don't use anything similar to this. The only CSS I could suggest to set a specific order for things relies on using flex-box layouts. Then you could choose to give each div a class with styling like:
div.first {order: 1;}
div.second {order: 2;}
div.third {order: 3;}
div.fourth {order: 4;}
using a media query and breakpoint with alternate styling prior to the breakpoint. I don't know of a simple execution for what you want to do outside of flexbox, but there may be a way that isn't familiar to me.

There are some very CSS proficient members here, I'm hoping they will share a better answer for you.

[lucy24]

Is there a difference between the left column and the right column, like items from two different sources? Or do things just toggle back and forth between one and the other in sequential order? If it's the latter, it seems as if there shouldn't be two lists in the first place. You should have a single list, with each item set to {display: inline-block} with a mininum and maximum width. (Sure, people with vast browsers can see three items side by side. Why shouldn't they, if they enjoy that kind of neck exercise.)

No they are not dynamically created

Let me double-check this one. When you say "not dynamically created" do you mean that you're personally hand-coding the html and manually putting in the updated information as it arrives? Or is there a bit of php that puts your information into alternating columns?

[james_09]

Thanks for the suggestions. There is no difference between the right and left column, so I'm going to try your suggestion of creating one list.

....And yes I personally update the html for every post on my home page. I don't use a content management system yet.

[lucy24]

I don't use a content management system yet.

Well, there's a vast middle ground between using a CMS and sneaking in a few words of php ;)