Swapping Column Stack Order for Mobile?

[ErgoArchitecture]

Hi, I have a page on which I would like to have the contents of the left column stack below the contents of the right column when they jump into a mobile stack.

I thought this article Swap Columns on Mobile would do the trick, and it does in fact swap the columns, but after swapping they remain side-by-side rather than stacking.

You can see what I am trying to do here. The first quotation I have applied the column swap above, and the rest I left to behave naturally.

I simply want the attribution to go below the quote on mobile. Also, I would prefer not to duplicate every row, reverse the order, then hide on mobile. We have dozens or even hundreds of entries, and this does not make for a smooth creation or editing workflow for our poor interns! It is too labor intensive and prone to error. I feel the column swap above is very close, I just can’t figure out how to get it stacking again.

Thanks!

[friech]

Hi Ergo,

Thank you for writing in, on your CSS rule .x-section .x-container.swapcolumns, please add a flex-wrap: wrap; property, this will make the columns stacking again in mobile.

Now to re-order your columns, flexbox has this order property, all order default to 0, lowest to highest so if we can set the left-column order to even just 1, it will go defer from right-column.

e.g.

@media (max-width: 767px) {
	.x-column.ergo-rfp-column-left {
		order: 1;
	}
}

You might need to adjust the column/text top and bottom margins after this though.

Hope it helps,
Cheers!

[ErgoArchitecture]

Hi Friech,

Worked perfectly! Thank you!

Steve

[nabeel]

Glad we could help.

Cheers!