I'm using display: flex; to create tiles view.
I'm trying to put the third picture under the second picture.
But, whenever I do it, the third picture went under the first picture and won't come under second picture,

```css

    @media screen and (min-width: 1000px) {
      .main {
        height:1800px;
        width: 100%;
        margin: 0px 0px 0px 0px;
        position: relative;
       z-index: 0;
      }

      .parallax {
        /* The image used */
        background-image: url("https://i.ibb.co/r272XPt/2019-2020.png");
        /* Set a specific height */
        min-height: 400px;
        opacity: 60%;
        filter: blur(2px);
        -webkit-filter: blur(2px);
        /* Create the parallax scrolling effect */
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .tiles{
        position:relative;
        top:100px;
        width:90vw;
        margin-left:5vw;
        display: flex;
       flex-wrap: wrap;
      }

      .chromebookHelpdesk img{
        margin-left:5vw;
        width:50vw;
        display:block;
      }

      .subhelp{
        height:25vw;
      }

      .subhelp img{
        margin-left:5vw;
        width:25vw;
        display:block;
      }

      .studentsTour img{
        margin-left:5vw;
        width:20vw;
        margin-top:5vw;
        display:block;
      }

      #projects img {
        text-align: center;
        display: block;
        width: 25vw;
        margin: 20px;
      }

      .mission_logo {
        width: 200px;
        display: inline-block;
        float: left;
        text-align: center;
      }

      .mission {
        text-align: center;
        margin-top: 100px;
        font-size: 20px;
      }

      .ingenuity {
        color: #3cba54;
        font-size: 60px !important;
      }

      .creativity {
        color: #f4c20d;
        font-size: 60px !important;
      }

      .innovation {
        color: #db3236;
        font-size: 60px !important;
      }
    }

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

      .main {
        height:2500px;
        width: 100%;
        margin: 0px 0px 0px 0px;
        position: relative;
        z-index: 0;
      }

      .parallax {
        display: none;
      }

      .mission_logo {
        width: 60vw;
        text-align: center;
      }

      .mission {
        text-align: center;
        margin-top: 100px;
        font-size: 15px;
      }

      .ingenuity {
        color: #3cba54;
        font-size: 40px !important;
      }

      .creativity {
        color: #f4c20d;
        font-size: 40px !important;
      }

      .innovation {
        color: #db3236;
        font-size: 40px !important;
      }
    }

    .tiles h1 {
      text-align: center;
      font-size: 50px;
      color: black;
    }

    .follow{
      position:relative;
      top:100px;
      text-align:center;
      border-radius: 50%;
      background-color: #84e3ca;
      width: 50vw;
      height: 50vw;
      margin-left: 25vw;
      opacity:70%;
    }

    .follow h1{
      font-size:35px;
      padding-top: 20vw;
    }

    .follow h2{
      font-size:30px;
    }
```

```html

  <div class="main">

    <div class="tiles">
      <div class="chromebookHelpdesk"><a href="https://sledteam.github.io/sled/chromebook"><img
            src="https://github.com/sledteam/sled/blob/master/Chromebook%20Helpdesk.png?raw=true" alt="Chromebook-Helpdesk"></a></div>
      <div class="subhelp"><a href="https://sledteam.github.io/sled/chromebook"><img
            src="https://github.com/sledteam/sled/blob/master/Sub%20Help.png?raw=true" alt="Sub Help"></a>
      </div>
      <div class="studentsTour"><a href="https://sledteam.github.io/sled/chromebook"><img
            src="https://github.com/sledteam/sled/blob/master/New%20Students%20Tour.png?raw=true" alt="New Students Tour"></a></div>

    </div>
```

I'm stuck with this for a week.
I would appreciate it if anyone knows a solution for this.