带Flexbox的砌体，动态高度

Question

我有一个带有flexbox（https://florashapes.lucaskatayama.com）的砌体，并且在移动浏览器中，当照片高度大于另一张时，下面的照片进入新行

喜欢这个

如何获取该空白处的最后一张照片？

我的scss就像这样

.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%;
        }
      }
    }
  }

示例os项目和容器

<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>