[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
    Posts
  • #2061310
    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 -->
    #2061311
    Keith

    **Preferably just mobile**

    #2061334
    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.

    #2061343
    Elvin
    Staff
    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?"

    #2061348
    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?

    #2061349
    Keith

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

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

    #2061370
    Elvin
    Staff
    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.