Twitter bootstrap 3 根据Bootstrap3中的分辨率更改列的内容

在Bootstrap 3中，我有：

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <img ...>
      <p>...</p>
    </div>
    <div class="col-md-4">
      <img ...>
      <p>...</p>
    </div>
    <div class="col-md-4">
      <img ...>
      <p>...</p>
    </div>
 </div>
</div>

当我转到更小的屏幕时，它会转到：

IMG
Text

IMG
Text

IMG
Text

我希望保留大页面的布局，但对于小页面，我希望：

IMG  Text
IMG  Text
IMG  Text

这与：

<div class="container">
  <div class="row">
    <div class="col-xs-6 col-sm-6">
      <img ...>
      <img ...>
      <img ...>
    </div>
    <div class="col-xs-6 col-sm-6">
      <p>...</p>
      <p>...</p>
      <p>...</p>
    </div>
 </div>
</div>

但这不适用于大屏幕

我不知道怎么说，“当页面较大时，img和p应该在同一列中，但当页面较小时，img和p应该在不同的列中

有什么建议吗？

使用嵌套（）解决您的问题：

<div class="container"> 
<div class="row">
    <div class="col-xs-12 col-sm-4">
        <div class="row">
            <div class="col-xs-6 col-sm-12">IMG</div>
            <div class="col-xs-6 col-sm-12">TXT</div>
        </div>  
    </div> 
    <div class="col-xs-12 col-sm-4">
        <div class="row">
            <div class="col-xs-6 col-sm-12">IMG</div>
            <div class="col-xs-6 col-sm-12">TXT</div>
        </div>  
    </div> 
    <div class="col-xs-12 col-sm-4">
        <div class="row">
            <div class="col-xs-6 col-sm-12">IMG</div>
            <div class="col-xs-6 col-sm-12">TXT</div>
        </div>  
    </div>  
</div>
</div>

IMG
文本
IMG
文本
IMG
文本

---

注意：通过添加class

img responsive

使您的图像具有响应性，

在您尝试过的东西上发布一个JSBin。好吧，所以我刚刚想出了如何做到这一点，但并不优雅：将自然量的文本和实际图像放在JSBin中是有帮助的。这是对响应实用程序的错误使用，因为您正在加载图像和文本t两次。你可以直接使用css:Awesome@ChristinaArasmoBeymer谢谢！我不知道css有多容易修复，我正在阅读clearfix的具体工作原理。非常感谢你的帮助。@BassJobsen:是的，直到之后才考虑嵌套行。但是是否更复杂，这是有争议的，5行css而不是nes在html中输入行和大量额外的类。img响应应该是自动的。

<div class="container"> 
<div class="row">
    <div class="col-xs-12 col-sm-4">
        <div class="row">
            <div class="col-xs-6 col-sm-12">IMG</div>
            <div class="col-xs-6 col-sm-12">TXT</div>
        </div>  
    </div> 
    <div class="col-xs-12 col-sm-4">
        <div class="row">
            <div class="col-xs-6 col-sm-12">IMG</div>
            <div class="col-xs-6 col-sm-12">TXT</div>
        </div>  
    </div> 
    <div class="col-xs-12 col-sm-4">
        <div class="row">
            <div class="col-xs-6 col-sm-12">IMG</div>
            <div class="col-xs-6 col-sm-12">TXT</div>
        </div>  
    </div>  
</div>
</div>