不同尺寸的Bootstrap回流内容

Question

我知道Bootstrap 3网格的基础知识，包括推/拉，但我还没有找到一种方法来做这样的布局：

基本上我想要XS大小的图像之间的文本块，但随着窗口变大，它会被提升到自己的列中。我知道我可以使用javascript或其他东西来移动内容，但我正在寻找一种在标记中执行此操作的方法。有人有任何提示吗？

Answer 1

这似乎可以，但我不确定当图像高度超过文本高度时你想要发生什么。这发生在md宽度的演示中。

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6">
            <img class="img-responsive" src="..." />
        </div>
        <div class="col-xs-12 col-sm-6 pull-right text">
            <p class="lead">text text text tex...</p>
        </div>
        <div class="col-xs-12 col-sm-6">
            <img class="img-responsive" src="..." />
        </div>
    </div>
</div>

Demo

Answer 2

您可以使用两个添加的类来完成：

DEMO：http://jsbin.com/piwoja/1/

http://jsbin.com/piwoja/1/edit

<强> CSS：

.clear-left {clear:left}
@media (min-width:768px){
  .pull-right-sm {float:right;}
}

<强> HTML：

      <div class="container">
      <div class="row">
         <div class="col-sm-6">
            <img class="img-responsive" src="http://placehold.it/500x500&text=Image 1" />
         </div>
         <div class="col-sm-6 pull-right-sm">
            ... your text goes here long or short
         </div>
         <div class="col-sm-6 clear-left">
            <img class="img-responsive" src="http://placehold.it/500x500&text=Image 2" />
         </div>
      </div>