html - 文本换行到屏幕调整大小的下一行

Question

我有一个 UI，其中我在磁贴的同一行中显示带有一些文本的图标(在右侧)。这里的问题是，当我调整屏幕大小时，文本会换行到下一行，即使我减小文本大小，它仍然不会与图标对齐。谁能帮我吗？这是一个视觉表示。这是屏幕全尺寸时的情况:

然后这是调整大小时发生的情况:

如何使图标旁边的文本像原始大小(全尺寸)一样？

这是显示图标和文本的代码:

 <div class="row">
    <div class="col-md-2 resize" data-toggle="tooltip" title="Date of Birth">
      <i class="i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
    </div>

    <div class="col-md-10">
      <h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
    </div>    
</div>

Answer 1

将 col-md 更改为 col-xs

<div class="row">
    <div class="col-xs-2 resize" data-toggle="tooltip" title="Date of Birth">
      <i class="fa fa-calendar fa-2x icon-white" style="margin-top:17%;"></i>
    </div>

    <div class="col-xs-10">
      <h4 class="icon-white m-h4" id="dob">16-Jul-2014</h4>
    </div>    
</div>