Swap Columns in Row on Mobile View

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

I found the code above, and it works on this page.

But it doesn’t work on blog posts.

Any idea why?

When i apply it to a row in a blog post it just automatically swaps it from the start regardless of device.

Hi Jesse,

Thank you for writing in, the @media (min-width: 768px) is to apply the code on 768px and above screen, but you need that code for mobile, please update that to @media (max-width: 767px)

e.g.

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

Hope it helps,
Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.