OH3 pages: responsive column layout?

On my Overview page, I added a row with 3 columns. Each column has a list card with a list of controls (light switches, alarm zones, etc). It looks great on my laptop screen.

But on my phone, it still tries to stuff 3 narrow columns onto the screen and they’re totally unusable. Is there any way to make a responsive column layout that changes to stacked based on the screen size?

This may help:

Thanks, yes it did. I removed my row/column sections and used only masonry. I agree with the other comment that those blocks are too narrow and I wanted a max of 3 columns. So in the yaml for the overview page, I added a config section:

  - component: oh-masonry
      cols: {default: 3, 1280: 1, 1023: 3, 768: 1}