我有两行，每行三列。第一行包含图像，第二行包含文本区域。在桌面浏览器中 - 三列水平对齐 - 每个图像都在相应文本区域的顶部对齐。但是在移动设备上，当然，所有列都堆叠在彼此下方。这使得第一行中的所有图像都显示在彼此下方。然后文本区域以相同的方式跟随。
是否有一种 css 方式来重新排列我的列？我想将图像及其相应的文本区域堆叠在一起，如下所示：
image1
textArea1
image2
textArea2
image3
textArea3
我有一个jsfiddle设置。
<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">
<div class="row">
<div class="span4"> <div class="span4"> <div class="span4">
没有图像，但你得到了一般的想法。
我假设您使用的是引导程序 3.0。
这是一种非常常见的布局情况。你有几个选择。
如果您将所有列放在同一个容器中并在各种视图上相应地处理它们，您可以使用内置的引导列重新排序和偏移量。然而，这主要与重新排列内容显示的顺序有关，对于这种特殊情况并不是最佳的，但请看看它是如何工作的，因为它将在未来的各种场景中派上用场。
但是在您的情况下以及我在这种情况下广泛使用的最合适的解决方案是将图像和文本放在相同的列上，如下所示：
<div class="row">
<div class="col-md-3">
<img class="img-responsive" src="..."/>
<p>...image text here...</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="..."/>
<p>...image text here...</p>
</div>
<div class="col-md-3">
<img class="img-responsive" src="..."/>
<p>...image text here...</p>
</div>
</div>
这样，您就有了在所有视图上正确显示的列。
请记住，bootstrap 3 是移动优先的，开发应该从最理想的视图开始，从最小的视图到最大的视图。始终尝试将相关的 dom 元素放在一起，以便它们在不同大小的布局上具有理想的行为。
您只需要确保您的图像等于或大于较大的列空间宽度，并且您在图像上使用img-responsive类，以使其正确缩放。
还有其他方法可以实现这一点，但它们破坏了使用引导程序进行响应式布局的目的，并且会因为没有充分的理由和类似的结果而变得更加复杂。
尝试在引导程序中保持标记尽可能简单和优雅，以便更好地维护，否则事情很容易在类的代码汤中丢失。
您可以使用 twitter bootstrap 的缩略图，例如http://twitter.github.com/bootstrap/components.html ，而不是使用行来显示下面的图像和相关信息， 这是示例
<ul class="thumbnails">
<li class="span4">
<div class="thumbnail">
<img src="http://placehold.it/300x200" alt="">
<h3>Thumbnail label</h3>
<p>Thumbnail caption...</p>
</div>
</li>
...
</ul>
<div class="row">
<div class="col-sm-4">
<div class="row">
image1
</div>
<div class="row">
textArea1
</div>
</div>
<div class="col-sm-4">
<div class="row">
image2
</div>
<div class="row">
textArea2
</div>
</div>
<div class="col-sm-4">
<div class="row">
image3
</div>
<div class="row">
textArea3
</div>
</div>
我希望它有效。
我建议在行之后放一些。我想你可以把它写成这样的结构
<div class = "container">
<div class = "row">
<div class = "col-md-12">
<div class = "box-container">
<div class = "image">
<img href="path/to/image.jpg"/>
</div>
<div class = "paragraph">
<p>Lorem Ipsum dolor set amit...</p>
</div>
</div><!-- end of box container-->
<div class = "box-container">
<div class = "image">
<img href="path/to/image.jpg"/>
</div>
<div class = "paragraph">
<p>Lorem Ipsum dolor set amit...</p>
</div>
</div><!-- end of box container-->
</div>
</div>
</div>
然后为您的盒子容器和段落容器设置一些宽度。
你也可以用不同的方式来做。当您在移动设备上查看时，这将自动堆叠。
<div class = "container">
<div class = "row">
<div class = "col-md-4">
<div class = "box-container">
<div class = "image">
<img href="path/to/image.jpg"/>
</div>
<div class = "paragraph">
<p>Lorem Ipsum dolor set amit...</p>
</div>
</div><!-- end of box container-->
</div><!-- 1st box-->
<div class = "col-md-4">
<div class = "box-container">
<div class = "image">
<img href="path/to/image.jpg"/>
</div>
<div class = "paragraph">
<p>Lorem Ipsum dolor set amit...</p>
</div>
</div><!-- end of box container-->
</div><!-- 2nd box-->
<div class = "col-md-4">
<div class = "box-container">
<div class = "image">
<img href="path/to/image.jpg"/>
</div>
<div class = "paragraph">
<p>Lorem Ipsum dolor set amit...</p>
</div>
</div><!-- end of box container-->
</div><!-- 3rd box-->
</div>
</div>
你可以在这里找到一个例子：
http://fittopage.org/2012/09/11/vertical-reordering-in-css/
CSS3 中还有一个指令，但据我所知尚未推出。
更新：在 css3 中它被称为 flexbox，但目前只有 chrome 支持它的一些功能。更多信息在这里
您是否尝试过将行放入您的跨度中？
喜欢
<div class="row">
<div class="span4">
<div class="row">
<div class="spanX">...</div>
</div>
<div class="row">
<div class="spanX">...</div>
</div>
</div>
<div>
我最终只是将每个图像和相应的文本放在同一行和同一列中。图片下方的文字。
您使用的是引导程序 3x 吗？
新的网格系统允许您为不同的屏幕尺寸设置自己的跨度尺寸，这样您就可以确保所有行都按照您想要的方式排列。
例子：
<div class="col-lg-2 col-md-1 col-xs-1"></div>