Hi,

I have 2 rows, both which have 2 columns

Row 1 Col 1 - text
Row 1 Col 2 - image
Row 2 Col 1 - image
Row 2 Col 2 - text

Image attached of what this looks like.

However, when screen resizes to mobile factor, they stack as expected. (image attached of that too).

I would like to have them stack a little differently. I would now like Row 1 to have the image first and text second so it's consistent with Row 2.

Not sure how to do this.

Thanks in advance

Hi Andrew, seems straight forward to implement but didn't seem to work for me.

Images attached of what my setup looks like.

Also here's the page if it helps.

http://stage.sumoninjamonkey.com/test-page

The col with the txt Speak-a-licious workshop program should reverse with the image to its right when the screen is on mobile.

Thanks.

So I think I sorted it...

Pop reversing-row into the row id

Then in page CSS add...

/*reverse row in desktop*/
@media only screen and (max-width: 1000px) and (min-width: 1px) {
#reversing-row div:nth-child(2)
{       flex-flow: wrap-reverse;
    display: flex;
    flex-direction: row-reverse;
}
}

This will target the correct child div.

The example you give does not select the right div so i'm not sure why it will ever work, maybe for an old version of salient I guess?

It tried this : https://themenectar.ticksy.com//article/11298/.

funny thing is it worked on desktop but on mobile nothing happens.

May be obvious.... remember you need to resize your browser down on desktop.

I did that, in mobile size the sequence doesn't change. But in full desktop size, it change. Confusing for me.