• Hello

    I’m designing some webpages where it becomes absolute necessary to reverse the grid layout ie. containers inside a grid in mobile viewport. Is there a way to achieve this?

    Thanks

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Tom

    (@edge22)

    Hi there,

    Yes, look for the “Order” option in the tablet/mobile sections of the Container block when it’s inside the Grid block.

    You can give the Container block a positive or negative order, which will move it before or after other blocks in the grid.

    Let us know if you need more info 🙂

    Thread Starter dronacharya

    (@ngrhd)

    Thank you for the reply.

    I’m trying to arrange 16 columns in a grid, they are paired as 25% – 75% and 75% – 25% alternatively.

    Under Tablet view-port for a column in a grid, If I do -1 to the column it rearranges to the very top of the first column in the grid and not the column left to it. Same happens with +1, the column rearranges to the very bottom of the last column in the grid and not after the column right to it.

    Any advice would be appreciated.

    Plugin Author Tom

    (@edge22)

    You can use any number. For example:

    -10 – this container will be first.
    -9 – this container will display next
    -8 – this one next

    So you can use these numbers to manually specify the order in which your containers display in the grid. It gives you total control 🙂

    Thread Starter dronacharya

    (@ngrhd)

    Excellent, I got it! So these are ‘n’ th positions in the grid itself (not relative to the column before or after) and since they are not relative, I had to redefine orders for all the columns from the start according to how I want them to appear in mobile/tablet viewports.

    Plugin Author Tom

    (@edge22)

    Exactly – it can be a manual process, but it offers the most flexibility 🙂

    Hello Tom,

    I read this post form but I do not see where the order is. Where is the order? Can you please screen shot or do a video of where this is and how to get to it.

    I am trying to reverse the order of my two columns and not having success.

    Any help would be appreciated, thank you

    Jennifer

    https://go.discoverybible.com/wp-content/uploads/2020/12/GB1.png
    https://go.discoverybible.com/wp-content/uploads/2020/12/GB2.png

    Hi @nittygrittytechy

    The “order” option only appears on Container blocks that are inside of a Grid Block.

    You’ll have to use the Grid Block if you want to use this particular feature.

    Sir I am sorry I do not see what you are seeing. Can you screen shot what you are looking at. I clicked on Grid block and I do not see the word “order”. Please remember you are familiar with your plugin and I am not. Any visual guidance would be great, thank you.

    I did use css however I would still like to know where this feature is for my client, thank you.

    https://www.loom.com/share/ce93152d5c5d4720a30f0aa48a3d15d0

    There are 2 things missing.

    First, you have to click the Container Block that’s inside of the Grid Block.

    Second, you have to be on either the tablet or mobile tab of the block.

    As shown here:
    https://share.getcloudapp.com/8LunY1Dm

    Ah ha, thank you for that video for it really helped me see what I was doing wrong. I am new to Gutenberg blocks. I usually just code everything. Thank you for your patience.

    No problem. Glad to be of any help. 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Reverse grid layout in mobile viewport’ is closed to new replies.