Responsive

Hey @yb5586164 – swapping the order around like that is something that likely needs some CSS code to do so. Could you please share a link to the actual page and I can take a closer look?

It’s for the theme default home page template available in the site editor. https://share.icloud.com/photos/091YOkG0PRaQSXDdI6_RvgCGg Could you provide the CSS code for that, please ?

Hey @sunza – the first step would be to add a CSS class to the columns that you want to appear first. In this particular instance you’d want to add the CSS class to the second column which has the text in it.

https://www.ads-software.com/documentation/article/columns-block/#advanced

If you can do that – and then share a link to the page – I can help with some CSS code to specifically target that column

Thanks in advance ! This is the link to a temporary site home page for testing purposes : https://offertrip.s3-tastewp.com

Hey @sunza!

You can first assign a custom class to any columns like this, that you want to reverse on mobile (see screenshot below)

Once you have the style in place, you can add some global additional css like this:

@media( max-width:782px ) {
  .wp-block-columns.reverse-on-mobile {
    flex-direction: column-reverse
  }
}

Just to add here, there are open pull requests for the columns and media+text block to support use-case like this, so this should not require any css changes in the future.

• https://github.com/WordPress/gutenberg/pull/55763
• https://github.com/WordPress/gutenberg/pull/56279

• This reply was modified 11 months, 4 weeks ago by Kavya Gokul (a11n). Reason: Added information about PRs on Github

Thanks @properlypurple, it’s working now after I followed the steps you explained.

It didn’t work for me… what did i miss / mess ?

It didn’t work for me… what did i miss / mess ?

@yb5586164 without seeing the actual site you’re working on it is tricky to tell – are you able to share a URL?

The main thing to double check would be:

• Did you add a class to the column block (as in the screenshot)
• Did you add the CSS code correctly