Curious on making 3 columns on top 4 on bottom for CMS Grid

I’m needing to make 3 columns on the first row and 4 columns on the second with CMS items.

I got it working fine on desktop and what they needed by just created 2 Div blocks and putting the collection list into both and limited each item to 3 for the first div block and last 4 for the other.

Problem is when you switch to responsive layout where there is 2 columns on tablet that it looks bad. Is there anyway to somehow combine the two? The client is really wanting 3 on top 4 on bottom. Do I not use grid for this? what are some options to accomplish this? I have no idea.

Thanks for your help!
Austin


Here is my public share link: LINK
(how to access public share link)