Column order in two rows

[compania123]

Hi there,
we have a problem with columns order. Everything works perfectly on big screen.

Problem is on mobile device when the order is not correct.

Thanks for your help guys.

[tristup]

Hi @compania123,
Thanks for reaching out.

The order of the column is correct in the mobile version, but as the Heading and the Content of the column is placed in two different Rows it adjusting the heading first and the content next.
So it looks like the last heading comes with the first content. I would suggest you move the individual Heading inside the same column which it belongs to get rid of this issue.

Thanks

[compania123]

Thank you @tristup for your answer. I was thinking about this solution. But if we do it like this we lost the double color effect behind the image. Is there another way?

Thanks
Michael

[marc_a]

Hi @compania123,

@tristup suggestion is the best way to achieve the proper layout in mobile view. Alternatively, another approach is create a new section that is only available in mobile view. Here’s how you can hide sections/rows/columns/elements by devices size.

Hide or Show Content by Device Size

Then your setup should looks like this:

Section
   Row1
     Column1 - your Heading
     Column2 - Your Content

   Row2
     Column1 - your Heading
     Column2 - Your Content

   Row3
     Column1 - your Heading
     Column2 - Your Content

   Row4
     Column1 - your Heading
     Column2 - Your Content

Hope that helps.

Thank you.

[compania123]

Thanks a lot guys.

[compania123]

Maybe the last question. We are trying also @tristup suggestion which is also looking good and suitable for our double color background. Only last thing is…is there a way how to order layers of elements. I mean if it is possible to have an image layer placed over headline layer.

Thanks
Michael

[tristup]

Hi Michael,

It’s great that we are able to help you with this. And regarding your last question, although I am not sure what you are expecting, you can try a similar thing with the Grid and especially the Cell Placement.

Hope it helps.
Thanks

[compania123]

Hi Tristup,

thank you for your reply. We will definitelly try what you suggested. Just to explain what I am trying to do is I have headline and image in one column, they should overlap but the image must be on the top of the headline not other way around.

Thanks,
Michal

[prakash_s]

Hi @compania123

Kindly follow the last suggestion by @tristup. You will find several cell options at the Grid element.
I assume that among them Cell overlap option is suitable for you.

You can adjust Cells by the Grid layout settings .

Hope it helps you.
Thanks

[compania123]

Thank you guys. Now it works perfectly.

Michael

[tristup]

Hi Michael,

Glad that we are able to help you.

Thanks