Hello A grid container has 4 sections. In each section, there are 2 items (text and image) and on the last sections, 2 card boxes. On mobile phones, The cyan boxes – item 1 – are visible and the green ones – item 2 – not visible. The card 2 on the last section is perfectly visible.

I provide JSFiddle. Please test only on mobile with less than 700px. Here is: jsfiddle.net/gusbemacbe/k1pr0ch3/5

If you want to understand, here is small snippet. 5 steps by step:

1. The container will be always grid of 4 sections on all gadgets:

html,
body,
.grid-container {
  height: 100%;
  margin: 0;
}

.grid-container * {
  border: 2px solid rebeccapurple;
  position: relative;
}

.grid-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "secção-1""secção-2""secção-3""secção-4";
}

1. Like the container, each section will be always row grid of 2 items/cards on all gadgets, except mobile phones:

.secção-1,
.secção-2,
.secção-3,
.secção-4 {
  display: grid;
  flex-flow: row wrap;
  -webkit-flex-flow: row wrap;
  grid-column-gap: 12px;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  padding: 10px;
}

.secção-1 {
  background-color: salmon;
  grid-area: secção-1;
  grid-template-areas: "item-1 item-2";
}

.secção-2 {
  background-color: crimson;
  grid-area: secção-2;
  grid-template-areas: "item-2 item-1";
}

.secção-3 {
  background-color: goldenrod;
  grid-area: secção-3;
  grid-template-areas: "item-1 item-2";
}

.secção-4 {
  background-color: darkslategrey;
  grid-template-areas: "cartão-1 cartão-2";
  grid-area: secção-4;
}

1. It will detect both items and cards, and centralize the items/cards horizontally and vertically, and will fit them up to section's height and width:

[class^='item-'],
[class^='cartão-'] {
  align-items: center;
  display: flex;
  font-size: 5vh;
  height: 100%;
  justify-content: center;
  width: 100%;
}

.item-1 {
  background-color: aqua;
  grid-area: item-1;
}

.item-2 {
  background-color: seagreen;
  grid-area: item-2;
}

.cartão-1 {
  background-color: khaki;
  grid-area: cartão-1;
}

.cartão-2 {
  background-color: blueviolet;
  grid-area: cartão-2;
}

1. I set flex to display because I want, like the reference 3, to keep the items/cards to fit up to the section's height and width, and the items/cards should be row and wrap. But with the flex, the items 2 disappeared, while the card 2 appears normally:

@media screen and (max-width: 700px) {

  [class^='secção-'] {
    display: flex;
    flex-direction: row;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    grid-column-gap: 0px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding: 10px;
  }
}

I know you were going to recommend table and other things, but if you change flex to table, the items 2 will appear but will lose full height.

      .secção-1,
      .secção-2,
      .secção-3,
      .secção-4 {
        display: grid;
        flex-flow: row wrap;
        -webkit-flex-flow: row wrap;
        grid-column-gap: 12px;
        grid-template-columns: 2fr 2fr;
        grid-template-rows: 2fr;
        padding: 10px;
      }