Element order gets messed up in mobile view, flexbox not working

[Johanna_Lazar]

Read link: https://preview.webflow.com/preview/mobilegrowth-org?utm_medium=preview_link&utm_source=designer&utm_content=mobilegrowth-org&preview=fef548a0aff351d0a48e8319a9c7f5ab&mode=preview

Hi all,

I have a section that consists of 4 headshots with text underneath like this
Desktop View (Past Speakers Section):

But on mobile view, the order gets messed up and shifts the entire thing over to the left

I tried attempting to change and fix it using flexbox, following this tutorial https://flexbox.webflow.com/#featurelist but it isn’t working for this particular section, and I can’t figure out how to get two rows and two columns lined up. I’ve tried making the flex box a column and wrapping the flex child (made a test here https://preview.webflow.com/preview/test-flexbox-89174d?utm_medium=preview_link&utm_source=designer&utm_content=test-flexbox-89174d&preview=03417191ccfba141909ca70366291c15&mode=preview), similar to what the flexbox game in webflow has you do, but I’m not sure what I’m doing wrong.

Does anyone have a solution?

[webdev (Jeff S)]

Don’t use columns. Just use flex or grid.

[Johanna_Lazar]

Sure, but I tried that. I can’t seem to get flexbox to get the same view that the desktop view does. I was testing in https://preview.webflow.com/preview/test-flexbox-89174d?utm_medium=preview_link&utm_source=designer&utm_content=test-flexbox-89174d&preview=03417191ccfba141909ca70366291c15&mode=preview and also played the flexbox game webflow provides and even though I was able to get some of it done and applied it to the link above it still won’t look like the desktop view. So I’m not sure what I’m doing wrong.