Looking for way to from columns to rows

Pretty impressive ! Thank you.

I was thinking about that, will have a look at it. Thank you.

        No problem, you’re very welcome. :winky:

I don’t see how that falls in with your original requirement to have the columns reduce to a single column for small screen in the order of :slight_smile:



In the new drawing you show an unequal number of items in each column so there is no straight correlation? You have 8 items in columns 1 and 3 and 6 items in column 2?

Does that really matter?

I do not see any problem when using duplicate content. :winky:

8-6-8-columns.html (15.7 KB)


Only logically :slight_smile:

I was expecting an even correlation otherwise there would seem no real need to linearise it that way. If columns are uneven then block 5 in the middle column may relate to block 6 in the other columns!

If there is no correlation between items across the page then semantically the html order should be a full column at a time.

Or maybe I’m over-thinking this :slight_smile:

At any rate I would never advise duplicate content unless it was just a small snippet or repeated nav perhaps. Duplicating real content is wrong on so many levels :wink:

1 Like

I cannot speak for a JavaScript solution. :wonky:

But I can say that it doesn’t make any difference
for the content duplication method, as my 8-6-8
attachment shows. :winky:


1 Like

The only real concern actually is in the Javascript implementation; the 3 columns are fairly simple, but the single becomes a bit of a hassle when the columns are unbalanced in number of elements and fail-safing the code.

Something to the tune of… (pseudocode to follow)

mode = 0;
on(screenWidth Change) {
  if (screenWidth < triggerpoint && mode = 0) {
    mode = 1;
    let go =  max(column1.children.length,column2.children.length,column3.children.length);
    for(i = 0; i < go; i++) {
        if(column1.children.length > 0) {
        if(column2.children.length > 0) {
        if(column3.children.length > 0) {
    } //EndFor
  elseif(screenWidth > triggerpoint && mode = 1) {
      mode = 0;
      singlecolumn.children.reduce((child) => {
        if(child.classList.contains('column1') { column1.append(child); }
        elseif(child.classList.contains('column2') { column2.append(child); }
        else { column3.append(child); }
        return null;
  } //EndElse
} //EndTrigger
1 Like

That’s OK then, as I’m not going to look in that direction. :winky:

I will now sleep really contentedly tonight. :biggrin:


1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.