「display: flex」を親要素に指定すると、子要素が横並びに並列！
デモ
テキスト- テキスト
- テキスト
- テキスト
CSS＋html（コメント無し）
<!-- CSS -->
<style type="text/css">
<!--
.lst-flex {display: flex;flex-flow: row wrap;width: 96%;max-width: 800px;margin: 0 auto 30px;padding: 0;}
.lst-flex li {width: calc(25% - 5px);margin: 0 auto 10px;list-style: none;}
.lst-flex li > img {width: 100%;}
.lst-flex li > span {font-size: 1rem;line-height: 1.5;letter-spacing: 0.01rem;color: #333;}
@media print, screen and (max-width: 750px){
.lst-flex li {width: 100%;}
}
-->
</style>
<!-- html -->
<ul class="lst-flex">
<li><img src="img.jpg" alt=""><span>テキスト</span></li>
<li><img src="img.jpg" alt=""><span>テキスト</span></li>
<li><img src="img.jpg" alt=""><span>テキスト</span></li>
<li><img src="img.jpg" alt=""><span>テキスト</span></li>
</ul>
