Display certain column first on mobile

Hello,

I've got my columns setup for desktop currently so they alternate images on the left and right.

This works fine for desktop but on mobile it doesn't display the images in the right order because it is obviously using the first column per row.

I'm wondering what code can be added to prioritize a column after a certain width breakpoint or **Preferably** just on mobile.

On mobile, it should go text, image, text, image.

Here is a link to how it displays on desktop
https://ibb.co/V9b3Cd5

Here is how it currently displays on mobile
https://ibb.co/Hd65D3d

Code for first row (total 5 Rows)

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"45%"} -->
<div class="wp-block-column" style="flex-basis:45%"><!-- wp:generateblocks/headline {"uniqueId":"e423d9aa"} -->
<h2 class="gb-headline gb-headline-e423d9aa gb-headline-text">Explore The Outdoors</h2>
<!-- /wp:generateblocks/headline -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"55%"} -->
<div class="wp-block-column" style="flex-basis:55%"><!-- wp:image {"id":3693,"sizeSlug":"full","linkDestination":"none","className":"is-style-default"} -->
<figure class="wp-block-image size-full is-style-default"><img src="https://redacted.ca/staging/5642/wp-content/uploads/2021/12/1-1.png" alt="" class="wp-image-3693"/></figure>
<!-- /wp:image -->