Alternating Columns: Mobile Problems

Having an issue with the mobile layout of alternating columns. It works exactly how I want it to when using columns on desktop view but switching to mobile doesn’t allow for text to always be above the video or vice versa.

From what I read it should be possible with Flex layout which I tried but am having even more issues with spacing and order with flex. When trying to resize and adjust the flexbox the video no longer follows its native aspect ratio, it instead becomes too tall.

The layout above is using flex and the layout below is using column, I would like the flexbox to mimic the column design (below) but work on mobile as well.

Is it just an issue I’m having with not correctly using the flex layout?
Maybe I should try a different layout all-together?

Here is my read-only: https://preview.webflow.com/preview/noelfenez?utm_source=noelfenez&preview=185d9a699b07613955b1144cf137c332

*My flexbox/column experiment is on the Personal Projects page.

Thank you in advance for any advice!