Flip column mobile

[RPronk]

Hello, I have an important page for me left image, right text. Next row left text, right image. On mobile the result is you will see text, image, image, text. Is there an easy solution to flip left and right column each alternating row on mobile?

This is the page: https://jittysamsterdam.com/over-jittys/

Thanks for your help!!!

[thai]

Hi @RPronk,

• Please add the swap-column class to your row:

• Then assign the left-column & right-column to your left & right columns.

• After that adding this custom CSS:

@media (max-width: 767px){
    .swap-column {
        display: flex;
    }

    .left-column {
        order: 2;
    }

    .right-column {
        order: 1;
    }
}

Hope it helps

[RPronk]

Thanks!!! I have done so, in the second row but sadly it does not function… I entered the CSS in the page CSS

https://jittysamsterdam.com/over-jittys/
Thanks for your help!!!

[christian]

Hey @RPronk,

I’d recommend that you try this method. The CSS snippet that was given to us by our core developer to temporarily aid for this case is this:

@media (min-width:768px) {
  .x-container.marginless-columns.cs-reverse-columns {
    direction: rtl;
  }

  .x-container.marginless-columns.cs-reverse-columns > .x-column  {
    direction: ltr;
  }

  .rtl .x-container.marginless-columns.cs-reverse-columns {
    direction: ltr;
  }

  .rtl .x-container.marginless-columns.cs-reverse-columns > .x-column {
    direction: rtl;
  }

  .x-container.cs-reverse-columns > .x-column {
    float: right;
  }

  .x-container.cs-reverse-columns > .x-column:last-of-type {
    margin-right: 4%;
  }

  .x-container.cs-reverse-columns > .x-column:first-of-type {
    margin-right: 0;
  }
}

You can insert that in Theme Options > CSS for global application or Content CSS to apply it only on per page basis.

With that CSS in place, you just need to add this class: cs-reverse-columns to your row.

And, that will flip the columns in desktop to tablet view.

Screenshot without the CSS:

Screenshot with the CSS

In mobile view, the original setup will take effect since the CSS is wrapped in a media query. Remember that the original setup is the top column is the left column (not the flipped one)

In that screenshot above, I used a Gap element that only displays in mobile or acts as a responsive spacer using the Hide During Breakpoints feature.

I also said this is temporary because in the future, there might be a way to achieve this easily or without custom CSS.

Hope that helps.