I have a section on my website, where I load data from backend. And i want the data to be rendered as the following preferred as an grid format.
The height of each row item depend on the data, that is beeing loaded.
Desired form:

I first was trying to achive it with a grid-display, but that doesn't work. For static websites there are possibilities to get the desired result (hardcoded), but for dynamic websites not. So i've got following result with grid:
So probably the best way, i thought would be to use 2 divs, that represent the cols. However this should be responsive for mobiles etc. so it should convert to only one col on mobile. And there comes the problem with using divs instead of grid: It doesn't have the same order anymore:
I was testing every grid-settings that are described in the documentation. But i could not figure it out how to do it. I have the assumption, that this won't be possible with grid.
(If that isn't possible, i will use completely different code for mobile and desktop with media querys. But my intention was to keep the code simple as possible.)
Is it possbile, to do that with a grid?

