Cell orientation on mobile

Design help General
1

Hey I was just looking for some help with my cell orientation (All under about-section on website). On mobile I’d like bro2-cell (with the picture) under the bro2-text without changing how the website looks on desktop.

Any help is appreciated!

Here is my site Read-Only: Webflow - Micah's tutoring

2

Restructure it using flex.
Flex has the ability to reverse the direction of the flow, which makes responsive layouts like this easy.

On desktop;

DIV
  DIV bro1-row   Flex horizontal
    DIV bro-text  50% width
    DIV bro-image  50% width
  DIV bro2-row   Flex horizontal reverse
    DIV bro-text  50% width
    DIV bro-image  50% width

Note the both have the same text/image element positioning but bro-row2 is reversed so on desktop it appears image first.

On mobile, same structure, note the style layout changes;

DIV
  DIV bro1-row   Flex vertical
    DIV bro-text  100% width
    DIV bro-image  100% width
  DIV bro2-row   Flex vertical forward
    DIV bro-text  100% width
    DIV bro-image  100% width

Here since you’ve overridden that bro2-row reverse with a forward flow, the text appears above the image.

1 Like