[Support request] Display certain column first on mobile

Home Forums Support [Support request] Display certain column first on mobile

Home Forums Support Display certain column first on mobile

  • This topic has 6 replies, 2 voices, and was last updated 4 weeks ago by Elvin.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #2061310


    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

    Here is how it currently displays on mobile

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

    **Preferably just mobile**


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

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

    It’s not working for me.

    Customer Support

    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

    A wise man once said:
    "Have you cleared your cache?"


    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?


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

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

    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

Viewing 7 posts - 1 through 7 (of 7 total)
  • You must be logged in to reply to this topic.