Twitter bootstrap 不同大小的引导回流内容

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

---

基本上，我希望图像之间的文本块大小为XS，但随着窗口变大，文本块会被提升到自己的列中。我知道我可以用javascript或其他东西移动内容，但我正在寻找一种在标记中实现这一点的方法。有人有什么建议吗？

这似乎可以，但我不确定当图像高度超过文本高度时，您希望发生什么。这在我的演示中以

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>

文本文本

---

您可以通过添加两个类来完成此操作：

演示：

CSS:

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

      <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>

HTML:

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

      <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>

... 你的文字在这里长或短

在最小宽度处向右浮动，然后向左移动，看到我的回答了吗？这种方法不起作用吗？@cvrebert:我没想到，因为我已经习惯于在没有明确的类的情况下制作我自己的东西：左。将进行测试。@cvrebert:yep，但是因为他想要小而高，所以这会更好。@cvrebert:Not真的——clearfix hidden xs仅在文本短于图像时才起作用。但清楚：left适用于可变的文本和图像高度：