How To Reorder Columns

This is one of the most frequently asked questions about CSS grid in Core. So, how can we reorder columns on any device?

I assume you have already read the Core Framework documentation, so I will get straight to the point.

You will use same rules as explained in the previous tutorial about SPAN and START classes.

Start class is all you need to change the order of columns on any device.

Let's take a look at a quick example. It will be a classic alternating layout, and we will reverse order columns in the first row for mobile devices.

Create a div for our columns and add a class c-columns-2.

We want to stack it to single column on less than 768px, so add c-columns-m-1 and c-columns-gap-m for a medium gap.

Now we have a simple and responsive solution for our two columns, which would look like this:

While this is a responsive solution, if we use image on cell #3 and #4, it will not look well on phones, as it will stack with a same order (1, 2, 3, 4).

Ideally, we want to follow a logical pattern on mobile devices and show text, image, text, image.

Let's reorder cell #2 to position #1 on phones (less than 768px breakpoint).

Because layout is already stacked to single column, we have to reorder rows instead of columns.

Select cell #2 and add c-row-start-m-1 class to it, and that's it.

You can check this post on phone to see the difference.

Tip: You can also use order: 1 in custom css which works with the CSS grid too.