How to responsively move elements from a row to a column with subgrid?

I am working on this front end mentor challenge. I’m using subgrid for the first time and it’s working beautifully to keep everything aligned. But it is supposed to be responsive so that on mobile it displays as a column of cards instead of a row. Normally I think I could do this but because I’m using subgrid, I’m not sure how to redefine the grid within the media query. How would I say that I want 3 primary rows (the cards) that should all be equally sized, each with 4 sub-rows within for each piece of info? I have it working-ish with repeat(auto-fit, minmax(200px, 1fr) for the columns but that causes one card to sometimes be alone on the bottom. Is there a way to avoid this? I also tried using container queries but I got confused about what to put where.