I would like to have a grid .wrapper div that has 3 .card divs within it utilizing subgrid with 2 sections within each .card div. These sections should line up because of subgrid, which is why I need to use grid for the parent div. However, I need to make this responsive similar to flexbox but with subgrid. I am aware flexbox would solve this problem, however I really want subgrid so the cards line up on each line. I also have a .most-popular div that I would like to stay on top of the grid, however this is not required if it breaks everything else. If A, B, and C were the rows and B was the .most-popular div, then here is what I want it to look like:
A B C for screens that are wide enough
B B
A C for screens that are medium sized
B
A
C for screens that are too small
I would prefer to not use media queries.
CSS: