Grid not stacking on mobile

Question

I have a 50/50 grid which I would like to stack (100%, i.e. one row per line) when displayed on mobile. Similar questions that I've found didn't help me.

HTML:

<div class="row">
  <a class="col"> <b> COL </b></a>
  <a class="col"> <b> COL </b></a>
</div>

<div class="row">
  <a class="col"> <b> COL </b></a>
  <a class="col"> <b> COL </b></a>
</div>

CSS:

.row {
  display: flex;
  background-color: #FEEED0;
  grid-column-gap: 30px;
  margin-bottom: 0.5%;
}
.col {
  flex: 50%;
  background-color: #FEEED0;
  border: 1px solid black;
  font-size: 25px;
  text-align: center;
  vertical-align: middle;
  line-height: 110px;
  margin-bottom: 1.5%;
}

.row a{
  color: black;
  text-decoration: none;
}

@media screen and (max-height: 650px) {
  .row {display: inline-block;}
}

How can I stack this grid on mobile?

Answer 1

First at all, if you want to use a Grid, then use a grid not flexboxes.

Second, display: flex; with grid-column-gap makes no sense. You need to use display: grid; for using grid attributes.

Third, why use a link tag a without href. If you want no links just a block then use a div. If you want a simpel text-line then use a paragraph p.

.grid {
  display: grid;
  grid-auto-rows: auto;
  grid-gap: 30px;
}

.grid div { 
  background-color: #FEEED0;
  border: 1px solid black;
  font-size: 25px;
  text-align: center;
  padding: 5px;
}

@media only screen
  and (max-width: 480px) {
    .grid {
      grid-template-columns: repeat(1, 1fr);
    }
}

@media only screen
  and (min-width: 481px) {
    .grid {
      grid-template-columns: repeat(2, 1fr);
    }
}

<div class="grid">
  <div>Card 1</div>
  <div>Card 2</div>
  <div>Card 3</div>
  <div>Card 4</div>
</div>