Contents of grid order

Hey

I am guessing this isn’t possible (at least right now) but is there a way to order the grid column’s contents? I know I can order the grid columns themselves on mobile, but what about the contents?

As I use 1 image at the top of the column and then one at the bottom of the next column etc on desktop, on mobile I would like this to look different, e.g. effectively the image at the bottom of each column’s contents.

Or possibly I am going about this the wrong way?

You can see the page I have designed that I am referring to here (specifically the container of the orange section): https://bit.ly/3pwveyt

Thanks for any assistance!

One way to do it would be to insert a Grid Block inside your Grid column container, in this case you would just need a nested 2 column grid that has all container widths set to 100% on all devices. One container for your Image and one for the rest of the content.

You now have a stacked grid which can then be re-ordered for mobile devices.

The alternative method would require some CSS:

@media(max-width: 768px) {
  .mobile-order .gb-inside-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  
  .mobile-last {
    order: 20;
  }
}

Then the Grid Container you want to re-order give it a class of mobile-order and the item you want to move to the bottom a class of mobile-last

Ah perfect! I had thought about using multiple grid blocks but it gets very messy and small then on the editor.

The CSS works perfectly and very useful for other cases as well :slight_smile:

Awsome - glad to hear it worked!