Responsive ordering of elements

Hi is there a way to specify the order in which elements show up when in mobile width. What I mean is: I have 3 groups, 2 side by side and one beneath, but when in mobile width the right hand group goes to the bottom of the page instead of beneath the first group.

Thanks

Usually, if you group the first two things in yet another group, they will respond the way you’re looking. Might be worth a shot!

I tried that but it doesn´t seem to work :confused:

Hey @chris7 :slight_smile: Are you trying to have the right two groups go directly beneath the slideshow element? And then you’d like the description text to go beneath all 3 groups?

If so, it will require some showing/hiding tricks, but it’s definitely possible! To set this up, I would first shorten the height of the “Full Description” text to where it’s one line (making sure cut off content is not checked). The text will expand automatically based on the length of the dynamic text.

In the responsive editor, create a hiding rule for this Full Description text element, which becomes hidden the moment the right side groups shift to the left side of the page. This will cause the right groups to look like they are beneath the slideshow element.

Last but not least, copy the description text element, and place the copy at the bottom of the bottom-right side group. Set this to not be visible on page load, and create a conditional statement which causes that element to become visible at the page width where the right side groups shift to the left again. For example, this would be “When page width < 600” --> This element is visible. (It probably isn’t 600, but you can see the precise page width in the responsive editor as well when shrinking the page width down, and stopping at the point when the groups shift from right to left.)

There definitely may be a better way, but I think this is one way to accomplish that effect! Please let me know if you have any questions. Happy to assist you with setting this up if you can share a link. :slight_smile:

Hi @fayewatson, thanks for the tip. it seems like quite a roundabout way of doing it, especially if I have several pages. Is there really not a more streamlined way without having to copy elements?

No problem :slight_smile: Yes, I think that’s the way to do it with that particular layout. It really depends page by page. Alternatively, you could place the right-side groups on the left-side to begin with, and that way the slideshow would display directly beneath the map, and the description would be beneath the slideshow?