Changing the order or arrangement

[Gelbseidenraupe (Ronny Roeske)]

Is it possible to automatically change the arrangement or order of text and images in a 2-column stack according to the screen size?

Example:

In the smallest vertical display—i.e., for mobile phones—the text appears first, followed by the corresponding image below it (text-image, text-image, text-image). This makes it easy to differentiate between the texts.

If the screen size is changed, the display switches to 2 columns. This means that the text appears on the left and the image on the right (text-image, text-image, text-image). This all works very well, but looks a little boring in this display format.

I would like to change the display on larger screens so that the displays alternate. Something like this:

Text - Image
Image - Text
Text - Image

Unfortunately, when I change the order, the display for mobile phones also changes. It then looks like this: (Text-Image, Image-Text, Text-Image). This means that the images and text are very close together, which looks a bit confusing.

And the following screenshot is the 2-column display in RW9.

[jbyfield]

Not saying this is the correct way or the ideal way but it is how I would do it.

I would duplicate the container that has your images and text in. You can then make one look how you want it on mobile and hide the other container at that breakpoint. Then, when you get to the screen where you want the other layout you unhide one container and hide the other.

I have done this with image sliders where I have three versions with different layouts in Elements but two are always hidden.

Hide is under the Layout tab by the way.

[dan]

Hi @Gelbseidenraupe,

This is easy in Elements once you know how. You basically need to use a container for the column and set it to be a grid item, and under advanced you can specify where it appears at each breakpoint!

I’ve recored a video for you that shows how to set this up:

Let me know if you have any more questions

Cheers!

[Gelbseidenraupe (Ronny Roeske)]

Hello Dan

Thank you for your quick response! I think there is still a misunderstanding here. All information, i.e. text and images, are arranged one below the other in the smallest display for mobile devices. First the text, then the image. The display on mobile phones should be such that we only ever have one column and the user only has to scroll down or up. There is always a text and a matching image.

As soon as the first breakpoint is reached, the display should be in two columns. And then as you have already explained so well.

[Gelbseidenraupe (Ronny Roeske)]

Hi jbyfield

Thanks for the tip.

Even if, as you say, it’s not perfect, it seems to work. I think Dan’s suggestion is along the same lines. I’ll try both!

[Gelbseidenraupe (Ronny Roeske)]

Maybe you could have an eye to my project?

elementsapp://downloadDocument/nwPH6iWXdwxj

[ben]

Hi @Gelbseidenraupe

Here’s a video with me using your project to solve this in a couple of different ways

And here’s the project from the video, if you want to use that!

Hope that helps

[Gelbseidenraupe (Ronny Roeske)]

I’m thrilled! Thank you very much!