Zurb Foundation 均衡器垂直对齐内容?

Zurb Foundation equalizer vertical align content?

我正在使用带有均衡器组件的 Zurb Foundation 5。当我有三个相等的列时,我希望中心列内容(文本)垂直居中,右列内容(图像)垂直底部对齐。

是否有适当或好的方法来执行此操作并仍然保持响应功能?

<div class="row" data-equalizer>
<div class="large-5 small-12 columns" data-equalizer-watch>
    <img class="show-for-medium-up" src="~/Content/Images/BallCropped-800.jpg" />

</div>
<div class="large-4 small-12 columns" data-equalizer-watch>        
    <p class="subhead">Middle Text</p>
    <ul>
        <li>
           One
        </li>
        <li>Two</li>
        <li>Three</li>           
    </ul>
</div>
<div class="large-3 small-12 columns " data-equalizer-watch>
          <img src="~/Content/Images/Bottomlogo-400.gif" />
</div>

尝试使用下面的代码片段

.wrapper {
  height: 200px;
  padding: 20px;
  border: solid 1px #000;
}

.row {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.columns {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.large-5 {
  align-self: flex-end;
}

.large-4 {
  align-self: center;
}
<div class="wrapper">
  <div class="row" data-equalizer>
    <div class="large-5 small-12 columns" data-equalizer-watch>
      <img class="show-for-medium-up" src="~/Content/Images/BallCropped-800.jpg" />

    </div>
    <div class="large-4 small-12 columns" data-equalizer-watch>
      <p class="subhead">Middle Text</p>
      <ul>
        <li>
          One
        </li>
        <li>Two</li>
        <li>Three</li>
      </ul>
    </div>
    <div class="large-3 small-12 columns " data-equalizer-watch>
      <img src="~/Content/Images/Bottomlogo-400.gif" />
    </div>
  </div>