Unable to get Dynamic (Mobile) website design working properly

I'm following This Guide on placing images side by side. On larger displays like PC's it looks fine:

But on mobile I get this: Which is obviously not right, but the site does mention adding this for mobile support:

@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
}

But when I add this it improves it: But does not fix the problem, I need the images to be top to bottom and not side to side on mobile as shown in the Demo On The Site. How do I fix this?

Here is my HTML Script (It's a test so I understand it's bare bones):

<!DOCTYPE html>
<html lang="en" dir="ltr">

  <head>
    <meta charset="utf-8">
    <meta name="description" content="Ultra Gamer Text">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Ultra Gamer test</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="css/style.css">

      <div class="row">
        <div class="column">
            <a href="https://example.com" target="_blank">
              <img src="./img/Testimage.png" alt="https://example.com" target="_blank">
            </a>
              <div class="textLink">
                <h3><a href="https://example.com" target="_blank">Test</a></h3>
              </div>
        </div>
          <div class="column">
            <a href="https://example.com" target="_blank">
                <img src="./img/Placeholder.png" alt="https://example.com" style="width:300px;height:300px;" target="_blank">
            </a>
            <div class="textLink">
              <h3><a href="https://example.com" target="_blank">Test</a></h3>
        <div class="column">
          <a href="https://example.com" target="_blank">
            <img src="./img/Placeholder.png" alt="https://example.com" style="width:300px;height:300px;" target="_blank">
          </a>

    <footer>


    </footer>

</body>



</html>

Here is my CSS code for the images:

a
{
  /* Removes underlines from links */
  text-decoration: none;
  color: black;
}

/* When mouse is hovering over text */
a:hover
{
     color: rgb(85, 85, 85);
     text-decoration:none;
     cursor:pointer;
}

/* When mouse is hovering over an image */
img:hover
{
  filter: brightness(0.8);
}
body
{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  background-color: #f0f0f0;
  padding: 0;
  margin: 0;
}
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
 float: left;
 width: 33.33%;
 padding: 5px;
 text-align: center;
 width:90px
}

/* Clear floats after image containers */
.row::after
{
 content: "";
 clear: both;
 display: table;
 text-align: center;
}

.row
{
  display: flex;
}

.column
{
  flex: 33.33%;
  padding: 5px;

}

.textLink
{
  color: black;
}

@media screen and (max-width: 500px) {
  .column {
    float:inherit;
    width: 100%;
  }
}
footer
{
  text-align: center;
  padding: 12px;
}

Solution

so many changes need to make in you code please compare your code with mine. html and css both

*{
  box-sizing: border-box;
}
a
{
  text-decoration: none;
  color: black;
}
a:hover
{
  color: rgb(85, 85, 85);
  text-decoration:none;
  cursor:pointer;
}
img:hover
{
  filter: brightness(0.8);
}
body
{
  font: 15px/1.5 Arial, Helvetica,sans-serif;
  background-color: #f0f0f0;
  padding: 0;
  margin: 0;
}
.row{
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.column {
  width: 33.33%;
  padding: 5px;
  text-align: center;
  flex: 0 0 33.33%;
}
.textLink
{
  color: black;
}
footer
{
  text-align: center;
  padding: 12px;
}
@media screen and (max-width: 500px) {
  .column {
    flex: 0 0 100%;
    width: 100%;
  }
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <meta name="description" content="Ultra Gamer Text">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Ultra Gamer test</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <div class="row">
    <div class="column">
      <a href="https://example.com" target="_blank">
        <img src="./img/Testimage.png" alt="https://example.com" target="_blank">
      </a>
      <div class="textLink">
        <h3><a href="https://example.com" target="_blank">Test</a></h3>
      </div>
    </div>
    <div class="column">
      <a href="https://example.com" target="_blank">
        <img src="./img/Placeholder.png" alt="https://example.com"  target="_blank">
      </a>
      <div class="textLink">
        <h3><a href="https://example.com" target="_blank">Test</a></h3>
      </div>
    </div>
    <div class="column">
      <a href="https://example.com" target="_blank">
        <img src="./img/Placeholder.png" alt="https://example.com"  target="_blank">
      </a>
      <div class="textLink">
        <h3><a href="https://example.com" target="_blank">Test</a></h3>
      </div>
    </div>
  </div>
  <footer>
  </footer>
</body>
</html>

your have not complete head tag and mention your all body content in your head tag.