Masonry with Flexbox, dynamic height

Question

I have a masonry with flexbox (https://florashapes.lucaskatayama.com) and in a mobile browser, when a photo height is greater than another the following photo get into the new line

Like this

How do I get the last photo in that blank spot?

My scss is like this

.masonry {
    display: flex;
    flex-direction: row;
    flex-grow: 0;
    flex-wrap: wrap;
    .item {
      flex: 1;
      flex-basis: 33.3%;
      flex-wrap: wrap;
      flex-grow: 0;
      position: relative;
      cursor: pointer;
      img {
        flex-basis: 33.33%;
        width: 100%;
        transition: .8s opacity;
        display: block;
      }
      @media screen and (max-width: 500px) {
        & img { flex-basis: 50%; }
        &:hover > .text {
          font-size: 0.8em;
        }
        & {
          flex-basis: 50%;
        }
      }
    }
  }

And an example os items and container

<div class="masonry">
   <div class="item">
     <span class="text"></span>
     <img src="">
   </div>
   <div class="item">
     <span class="text">Haworthia margaritifera</span>
     <img src="">
   </div>
</div>