How to use format images after a size change

I'm new to programming. I am trying to get it so I have one large image, and two lower images that fall to a lower line when needed to. Sometimes my code works and this happens. Other time it doesn't, and I can't figure out why. Can someone look at my code below and write what they would change to make the results consistent. Another problem I have is controlling the size of the lower images so they are equal. If anyone could help that would be greatly appreciated. Thanks.

/* Imported Fonts*/
@font-face {
    font-family: 'Fira Sans';
    src: url('Fonts/firasans-regular-webfont.woff2') format('woff2'),
         url('Fonts/firasans-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

*{
    margin:0;
    padding:0;
    border:0;
}
a:link{
    text-decoration:none;
    color:black;
}
a:hover{
    text-decoration: none;
    color:red;
}
a:visited{
    text-decoration:none;
    color:black;
}

.TopRow{
    font-family: Fira Sans, sans-serif;
    letter-spacing: 0px;
    width:100%;
    background-color:grey;
}
.Image1Nav{
    display:block;
    display:flex;
        flex-direction: column;
    margin-top:3%;
    margin-left:12.5%;
}

.Section1{
    /**/
}
.Image1{
    display: block;
    width:85%;
}

.Image2Nav{
    display:flex;
    flex-direction: row;
        flex-wrap:wrap;
    margin-left:5%;
    margin-right:5%;
    margin-top:4%;
    min-width: 30px;
    
   
}
.Section2 {
    display: flex;
        flex-direction: column;
     
  }

.Image2{
    flex:33.33%;
}
.Image3{
}

<!DOCTYPE html>
<html>
    <link rel="stylesheet" href="style.css">
<head>
        <title>TJ</title>
</head>
<body>
    <header class= TopRow>
        <div>
        <h1>
        <a href="index.html">
            TJ
        </a>
        </h1>
        </div>
    </header>
    <div class = 'Image1Nav'>
        <div class='Section1'>
        <a href="https://www.google.com">
        <img class= Image1 src="https://placehold.it/200x200" alt="noimg.jpg">
        </a>
        <div class="Image1txt">
        <p>
            Lorem ipsum, dolor sit amet consect
        </p>
        </div>
        </div>
    </div>
    <div class='Image2Nav'>
        <div class="Section2">
          <a href="https://www.google.com">
            <img class="Image2" src="https://placehold.it/200x200"alt="https://placehold.it/200x200">
          </a>
          <div class="Image2txt">
            <p>
              Lorem ipsum, dolor sit amet consect
            </p>
          </div>
        </div>
        <div class="Section3">
          <a href="https://www.google.com">
            <img class="Image3" src="https://placehold.it/200x200" alt="https://placehold.it/200x200">
          </a>
          <div class="Image3txt">
            <p>
              Lorem ipsum, dolor sit amet consect
            </p>
          </div>
        </div>
      </div>
</body>
</html>

Solution

What I understand :

<header class="TopRow">
  <div>
    <h1>
      <a href="index.html">
        TJ
      </a>
    </h1>
  </div>
</header>
<div class="Image1Nav">
  <div class="Section1">
    <a href="https://www.google.com">
      <img
        class="Image1"
        src="https://placehold.it/200x200"
        alt="noimg.jpg"
      />
    </a>
    <div class="Image1txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
</div>
<div class="Image2Nav">
  <div class="section Section2">
    <a href="https://www.google.com">
      <img
        class="Image2"
        src="https://placehold.it/200x200"
        alt="https://placehold.it/200x200"
      />
    </a>
    <div class="Image2txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
  <div class="section Section3">
    <a href="https://www.google.com">
      <img
        class="Image3"
        src="https://placehold.it/200x200"
        alt="https://placehold.it/200x200"
      />
    </a>
    <div class="Image3txt">
      <p>
        Lorem ipsum, dolor sit amet consect
      </p>
    </div>
  </div>
</div>

with css :

@font-face {
  font-family: 'Fira Sans';
  src: url("Fonts/firasans-regular-webfont.woff2") format("woff2"), url("Fonts/firasans-regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  border: 0;
}

a:link {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
  color: red;
}

a:visited {
  text-decoration: none;
  color: black;
}

.TopRow {
  font-family: Fira Sans, sans-serif;
  letter-spacing: 0px;
  width: 100%;
  background-color: grey;
}

.Image1Nav {
  display: block;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 3%;
  margin-left: 12.5%;
}

.Image1 {
  display: block;
  width: 85%;
}

.Image2Nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: 5%;
  margin-right: 5%;
  margin-top: 4%;
  min-width: 30px;
}

.Section2 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.Image2 {
  -webkit-box-flex: 33.33%;
      -ms-flex: 33.33%;
          flex: 33.33%;
}

.section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  max-width: 200px;
}

.section > a {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.section > a > img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}