Responsive column order

[tamdstudio]

What is the best way to reorder two columns (2/3 - 1/3) so that at the two smallest default screen sizes the 1/3 bit gets loaded first (on top) instead of at the end?

[friech]

Hi There,

Thank you for writing in, to do that, please assign a CLASS flex-row to the ROW where the 2/3 + 1/3 column is placed.

Then add this following custom CSS on the Theme Options > CSS area or on the Page’s CSS area.

@media (max-width: 767px) {
	.flex-row {
		display: flex;
	    flex-direction: column;
	}
	.flex-row .x-1-3 {order: 1;}
	.flex-row .x-2-3 {order: 2;}
}

Learn more about flexbox here.

And you might want to set your 1/3 column text-alignment to center. To make sure that the content (image or text) will be centered at all screens.

Hope it helps,
Cheers!

[tamdstudio]

Thank you again @freich. I was sure you’d have an elegant solution and you didn’t disappoint.

[basanta]

glad to know it works for you!

Thanks