What I use is a CSS grid feature called grid areas.

For example, if I want two columns, one for text and one for an image. On desktop I want my text on the left side, but for mobile I want the image on top:

In your markup, give each column an appropriate class name

<div class="my-grid">
    <div class="text-column">Text</div>
    <div class="image-column">Image</div>
</div>

Then in your css you assign those column's classes to a grid area. I use the same grid-area name as my class just to avoid confusing myself but the names don't need to be the same

.text-column{
    grid-area: text-column;
}
.image-column{
    grid-area: image-column;
}

Then where you set up your grid, you reference these areas,using the "grid-template-areas" feature -- in the order you want them to appear. So since in my case my mobile layout is the default I do it with the image column first.

.my-grid{
    display: grid;
    grid-template-areas: 'image-column' 'text-column';
    grid-template-columns: 1fr;
}

Then for my desktop display override, I swap the column order

@media (min-width: 768px) {
    .my-grid{
        grid-template-areas: 'text-column' 'text-column' ;
        grid-template-columns: 1fr 1fr;
    }
}

As I interpreted it, your question was more about CSS grid than the Umbraco block grid. If that is not the case then disregard my answer and clarify.

is working on a reply...