Bootstrap：响应页脚元素单词包装

Question

我正在尝试制作一个响应式页脚，其元素根据不同的屏幕尺寸调整其包装。我尝试了Bootstrap col-md-x col-sm-x <​​/ em>的网格，但没有按预期工作。

媒体查询似乎可以解决问题！

https://jsfiddle.net/wzyo53mL/

<div class="footer">
  <div class="container">
    <div class="row footer-row">
      <ul class="footer-icons list-unstyled list-inline">
        <li class="footer-container">
          <i class="fa fa-phone"></i> : 11223344
        </li>
        <li class="footer-container">
          <i class="fa fa-facebook-square"></i> : facebookherehere
        </li>
        <li class="footer-container">
          <i class="fa fa-envelope-open-o"></i> : support@support.com
        </li>
        <li class="footer-container">
          <i class="fa fa-map-marker"></i>: <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam in id illum debitis omnis sed? </span>
        </li>
      </ul>
    </div>
  </div>
</div>

自封字适用于小屏幕尺寸，但对于大屏幕尺寸来说有点可怕。有没有办法可以让最后一个元素与之前的元素保持一致？

任何帮助将不胜感激。提前谢谢！