要回答您的问题，您只需要查看带有前缀 css 的完整响应式演示：
/* Using col-xs media query breakpoint but you can change 481 to 768 to only apply to col-sm and above if you'd like*/
@media only screen and (min-width : 481px) {
.flex-row {
display: flex;
flex-wrap: wrap;
}
.flex-row > [class*='col-'] {
display: flex;
flex-direction: column;
}
.flex-row.row:after,
.flex-row.row:before {
display: flex;
}
}
要在 flex 列中添加对缩略图内容 flex 的支持，如上面的屏幕截图，还添加此...请注意，您也可以使用面板执行此操作：
.flex-row .thumbnail,
.flex-row .caption {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
.flex-text {
flex-grow: 1;
}
.flex-row img {
width: 100%;
}
虽然 flexbox 在 IE9 及以下版本中不起作用，但您可以使用带有条件标签的后备演示，使用javascript 网格之类的东西作为 polyfill：
<!--[if lte IE 9]>
<![endif]-->
至于接受的答案中的其他两个示例......表格演示是一个不错的想法，但实施错误。在引导列类上应用该 CSS 毫无疑问会完全破坏网格框架。您应该为一个和两个表格样式使用自定义选择器，不应将其应用于[class*='col-']已定义宽度的表格样式。仅当您想要等高和等宽列时才应使用此方法。它不适用于任何其他布局，也不是响应式的。我们可以让它在移动显示器上回退......
<div class="table-row-equal">
<div class="thumbnail">
Content...
</div>
<div class="thumbnail">
Content...
</div>
</div>
@media only screen and (min-width : 480px){
.table-row-equal {
display: table;
width: 100%;
table-layout: fixed;
border-spacing: 30px 0px;
word-wrap: break-word;
}
.table-row-equal .thumbnail {
float: none;
display: table-cell;
vertical-align: top;
width: 1%;
}
}
最后，已接受答案中的第一个演示实现了一个真实布局的版本，在某些情况下是一个不错的选择，但不适合引导列。这样做的原因是所有列都扩展到容器高度。因此，这也会破坏响应性，因为列不会扩展到它们旁边的元素，而是扩展到整个容器。此方法也不允许您再将底部边距应用于行，并且还会导致其他问题，例如滚动到锚标记。
有关完整代码，请参阅 Codepen，它会自动为 flexbox 代码添加前缀。
