How to reorder div blocks in mobile optimization?

Design help General
1

Hey team! :slight_smile:

I am super lost and would hugely appreciate some help! I would love to reorder two div blocks during mobile optimization. This means on desktop the div block in question is on the right, but on mobile they will stack on top of each other, but I’d actually like it to be on top. Does anyone know how to do this?

Desktop (Seller ID, annual revenue etc.):

image
image1994×766 102 KB

Mobile (div block with Seller ID etc. is at the bottom now, but should be on top):

image
image1136×694 60.1 KB

Link: https://preview.webflow.com/preview/bitsfordigits?utm_medium=preview_link&utm_source=dashboard&utm_content=bitsfordigits&preview=80181f22153e3b6129caab00e9ee1766&pageId=610b936bff14ef233ef652dd&workflow=preview

Let me know if anyone knows how to handle this! :slight_smile:

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

I’m reading this on my phone so I can’t inspect the css but are you using flex box on the parent element? Then simply change the order property of one of the column on mobile. Setting the first column to any positive number or the second one to 0 or a negative should do the trick.

1 Like
3

Hey @ollebrickarp, thanks for the quick response! Super sorry, I might too new to this, but where can I find the order property in the flex box? I cannot find it in the style section.

4

An alternative solution is to change the flex direction on the wrapper to reversed. This will have the same effect in this case.