使用flexbox引用引号（图像和文本）

Question

将此标记视为包含3个部分的引用：内容，作者姓名和图像。

    <div class="quote">
      <div class="content"> <p>"Quote content goes here"</p> </div>
      <div class="quote-img"> <img src="https://www.outsystems.com/PortalTheme/img/UserImage.png?24179"> </div>
      <div class="author"> <p>Author's name</p> </div>
    </div>  

预期布局

请注意，在小屏幕中，作者div应该是页脚，在较大的屏幕中，它应该与图像对齐。

如何使用flexbox执行此操作？这就是我到目前为止所拥有的：

JSBin link