[Support request] Display certain column first on mobile

[Keith]

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 -->

[Keith]

**Preferably just mobile**

[Keith]

I’ve found a past support post on this forum with this solution.

@media (max-width: 768px) {
.reverse-mobile {
flex-direction: column-reverse;
}
}

It’s not working for me.

[Elvin]

Hi Keith,

That CSS doesn’t exactly put a specific column to be the first on mobile. It turns the last column as the first one instead.

Plus that CSS only works if the container element has class reverse-mobile so you may have to add that in for this CSS to take effect.

I suggest using a Grid Block instead of using Container block + Columns block.

This is so you can set the specific order of columns by assigning an order value to the columns like this – https://share.getcloudapp.com/Qwu4ReGX

[Keith]

Sorry, I didn’t mention that I had used the reverse-mobile.

But either way, I’ve now tried using the grid element and that has left me with the exact same problem.

How do I reverse the order for mobile with grids?

[Keith]

Oh shoot, sorry I didn’t click the link.

I see now. Thank you kindly. This should work.

[Elvin]

Let us know if you need further help w/ it. No problem. 😀

[Author]

Posts