Zurb Foundation equalizer vertical align content? - css

Question

I'm using Zurb Foundation 5 with the equalizer component. When I have three equal columns I want the center column content (text) to be vertical centered and the right column content (image) to be vertical bottom aligned.
Is there a proper or good way to do this and still maintain the responsive features?
<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>

Answer 1

Try using the below snippet
.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>