First I'm not sure of the best way to word my question. Any help is appreciated and I will revise it.

I have sections in web that have alternating order as you scroll

text | image image | text text | image image | text

In mobile it doesn't look so organized because everything stacks. It becomes confusing what text goes with what image, because every other one is putting the image before it's text. The goal would be for the text to be on top in mobile.

[text image] [image text] [text image] [image text]

What is the best way to accomplish reversing the order on images that come are on the left in the section so that in mobile they all stack with the text on top and image on bottom?

  • You could either switch themes to one that's more inherently mobile-friendly, or create a child theme to write your own CSS to specify how things are laid out on a small screen. Typically writing your own from scratch with the mobile styles first gives mobile the best user experience and tends to create less total code. – WebElaine Jan 29 at 18:52
  • 1
    Use a CSS media query to apply CSS at a certain screen size. You can then use flexbox and its "order" property to swap the order of the images and text. – RiddleMeThis Jan 29 at 19:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.