Reverse marginless columns on mobile

[wei]

Hello, I’m trying to find a way to reverse the columns on mobile devices. The page I’m using has an image in column 1/2 and text in column 2/2. I would like the text to be on top of the image in mobile, instead of below. I was able to find the code, which is able to swap the column order but it forces a two column row in mobile. Can you help?

@media (max-width: 767px) {
.x-section .x-container.swapcolumns {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
}

[friech]

Hi Wei,

Thank you for writing in, please update your Flexbox code to this:

@media (max-width: 767px) {
.x-section .x-container.swapcolumns	{
	display: flex;
	flex-direction: column-reverse;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: center;
}
}

More details about Flexbox CSS

Hope it helps,
Cheers!

[wei]

Thank you!

[friech]

You’re welcome, I just notice that you have a caching plugin, if you don’t see the changes immediately please clear your caching plugins and your browser’s cache.

Have a nice weekend,
Cheers!