横並びのリストタグの高さを揃える時、下にある画像の高さを揃えたい

お世話になります。

横並びにした li要素の中に、テキストその下に画像を１枚載せています。
テキストの文字数がバラバラなので自動で高さを揃えています。
その際、liの自体の高さは揃っているのですが、li要素の中の画像は上部の文字数によって、揃わないです。
例えば、上のテキストが２行になってしまったとき、画像横一列同じ高さに揃えることは可能でしょうか？

レスポンシブにしたいので、テキスト画像の順番で載せたいです。

アドバイスいただければ幸いです。
宜しくお願いいたします。

css
1ul {
2    clear: both;
3    display: -webkit-box;
4    display: -moz-box;
5    display: -ms-box;
6    height: 100%;
7    display: -webkit-flexbox;
8    display: -moz-flexbox;
9    display: -ms-flexbox;
10    display: -webkit-flex;
11    display: -moz-flex;
12    display: -ms-flex;
13    display: flex;
14    -webkit-box-lines: multiple;
15    -moz-box-lines: multiple;
16    -webkit-flex-wrap: wrap;
17    -moz-flex-wrap: wrap;
18    -ms-flex-wrap: wrap;
19    flex-wrap: wrap;
20    overflow: hidden;
21}
22
23 li {
24    width: 30%;
25    height: 100%;
26    margin-right: 4.5%;
27    float: left;
28    margin-top: 3%;
29}
30

html
1
2<ul>
3<li>
4<span>テキストが入ります。テキストが入ります。テキストが入ります。</span>
5<img src="img．ｊｐｇ" alt="" >
6</li>
7<li>
8<span>テキストが入ります。テキストが入ります。</span>
9<img src="img．ｊｐｇ" alt="" >
10</li>
11<li>
12<span>テキストが入ります。</span>
13<img src="img．ｊｐｇ" alt="" >
14</li>
15</ul>

行動規範の内容に同意します

回答1件

ベストアンサー

Script使用じゃだめですか？

matchHeight

HTML
1<div id="box">
2  <ul>
3    <li>
4      <span></span>
5      <img>
6    </li>
7    <li>
8      <span></span>
9      <img>
10    </li>
11    <li>
12      <span></span>
13      <img>
14    </li>
15  </ul>
16</div>
17
18<script src="js/jquery.matchHeight-min.js"></script>
19<script>
20$(function() {
21    $('#box ul li span').matchHeight();
22});
23</script>