Streaming live at 10am (PST)

Help me change sequence of DIVs based on breakpoint


#1

We have a website design which involves a series of tiles. Conceptually you could say it's something similar to the icon grid in the middle of webflow.com/website/swifticons, although the layout is quite different from that.

Here's the question. Imagine that the tiles are laid out in the following sequence when in desktop view:
1 2 3
4 5 6
7 8 9
Our designer would like for the sequence to change when the page is viewed on a different platform; for example, on a phone in portrait view, it might show this instead:
1
3
6
2
4
8
etc.

Is this something that is possible within webflow? From what I've seen, the items are always displayed based upon the sequence of the DIVs in the HTML, but perhaps I am mistaken.

Thanks,
Bill


Making Structural Changes to Lower Level Views Without Having Responsiveness in Upper Level Views
#2

I would start by asking, why you want the sequance to change?

If I'm reading something left to right I would expect to read it in the same order straight down the page, would I not?

And to answer your question yes the order of the divs in the html is the order they will display on the page; top down, left to right. Unless you use some combination of absolute positioning which I wouldn't recommend doing.

If you want two different html structures for different view points you will need to create both and hide them when you dont want to see them.

Alterantively I am sure there is some Javascript out there that will do something like this for you.


#3

Alex, thanks. The reason for the change is that certain parts of the full website are made to be read vertically, but the DIVs are horizontal (it's the graphics that draw the eye across DIVs). When they go to mobile, we have to reorganize them to flow as the user would read them.

I'll look into absolute positioning for a bit, with the "not recommended" firmly in mind smile


#4

The easiest way to do it is just duplicate the divs that you want in different positions at different break points, add a class for the breakpoint and use the breakpoint hide/display function under the settings tab for each div and organize it how you need it done. smile


#5

Thanks, Waldo. That sounds like a great solution - do you think it would create difficulties long-term for managing the code, or is it pretty easy to do?


#6

It's easy to do smile just remember where all the instances are and update them all. I do it all the time on our re-targeting landing pages like: www.silverdollarcity.com/vacation smile and
Www.silverdollarcity.com/showboat


#7

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