Html 引导-对齐列

如何按以下方式对齐两列：

当它们在同一条线上时（当屏幕尺寸足够宽，可以并排放置时），它们应该垂直对齐。较短的柱应位于较高柱的中心

当屏幕缩小，使它们一个接一个放置时，它们应水平居中

我使用了网格系统，一列（

col-md-4

）上有图像（img响应），另一列（

col-md-8

）上有文本（

h4

）。当屏幕为md或更大时，由于文本没有图像高，文本应显示在图像的垂直中心，紧挨着它。但是，在到达屏幕sm或xs后，我希望所有内容都显示在容器的水平中心

<div class="container-fluid">
<div class="row">
   <div class="col-md-4"><img class="center-block img-responsive" src="foo.png" alt="foo" width="190" height="160" /></div>
   <div class="col-md-8">
      <h3>Foo image description</h3>
   </div>
</div>

图像描述

谢谢你的建议

以下是示例：

---

您使用的是2列md，一个用于桌面，一个用于移动设备。请尝试使用此类

col-md-4 col-xs-2

您需要在代码片段中发布代码（HTML/CSS/JS）的最小工作示例。见和。