如何阻止文本在浮动图像下流动

Question

https://codepen.io/anon/pen/GevgKR?editors=1100

我有一个网格样式的布局，可以在较小的屏幕上变成卡片布局

使用flex创建网格布局。在卡片布局中，所有元素都向左浮动。布局的开头有一个图像，因此文本在图像下方翘曲。

如何停止图片下方的文字换行。

我认为我需要在图像左侧创建一种假列。我可以使用flex来做到这一点，但这会像使用flex那样影响桌面视图上的布局

*{
  font-family: sans-serif;
  font-size: 14px;
}

.wrapper{
  max-width: 1366px;
  width: 90%;
  margin-right: auto;
  margin-left: auto;
}


.grid{
  &__row{
    display: flex;
  }

  &__cell{
    border: 1px solid lightgrey;
    flex: 1;
  }
}


@media(max-width: 700px){


  .grid{
    overflow: auto;
    border: 1px solid lightgrey;
    padding: 8px;
    &__row{
      display: block;
      &-header{
        display: none;
      }
    }

    &__cell{
      border: none;
      float: left;

      &-image{
        height: auto;
        clear: right;
      }
    }
  }  
}