Trouble Making Grid Columns Responsive


I’m having trouble making my Grid responsive. On desktop, I want the grid to have three columns as seen now (3x2 grid). On tablet and mobile horizontal, I want the grid to reduce to 2 columns (2x3). I watched the tutorials and followed the documentation to no avail. When I try to delete a column on tablet as directed, an auto column is generated, but I want the content to drop down and for a row to be auto generated. What am I missing?

Here is a link to my read only:

Also attaching some screenshots.

I solved this. I was using a grid inside the grid cell to contain the image with its caption as a group. I tried rebuilding this with div blocks inside of the cells instead of nested grids and the grid is now performing as expected.