Reverse Columns Order and Change Images alignment for Mobile View

Hi Kala,

Please note that this is not a theme issue.

The issue you experience is actually a normal behavior. Horizontal elements are stacked below each other on mobile screens. As far as I know, there is no way of controlling this in current version of WordPress columns implementation. Maybe try using “Media & Text” block instead, though I don’t think it contains the option either.

There is a new WordPress version coming out next month I think, which should actually allow you to tweak such option as far as I know (but please don’t quote me on this ;)).

Alternative solution would be to use a page builder which will allow you to set reversed order of columns on mobile screens.

As for image alignment, I don’t think that is possible without some additional custom CSS code.

Best regards,

Oliver

Hi Oliver,

Thank you for the quick response!

For now I have managed to achieve image alignment with the following CSS:

@media (max-width: 671px) {
    .wp-block-image .alignright {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
}

Reversing columns by setting additional CSS class to columns block and then adding additional CSS:

@media (max-width: 671px) {
	.reverse-columns {
		display: flex;
		flex-direction: column-reverse;
	}
}

I hope that there will not be any unwanted side effects ??

Thank you!
Kala

Hi Kala,

Very good solution! ?? Surely, I can’t guarantee you any future-proof as that also depends on changes introduced to future WordPress versions, but I’d say you should be fine with this CSS.

Best regards,

Oliver