Css 使用Twitter引导-我可以更改行和列的顺序吗？

我有两行，每行三列。第一行包含图像，第二行包含带有文本的区域。在桌面浏览器中，三列水平对齐，每个图像在相应的文本区域顶部对齐。 当然，在移动设备上，所有的柱子都是叠在一起的。 这使得第一行中的所有图像都显示在彼此下方。然后文本区域以相同的方式跟随

有没有css方法可以重新排列我的列？我希望将图像及其对应的文本区域按如下方式堆叠在一起：

image1
textArea1
image2
textArea2
image3
textArea3

我已经准备好了

---

没有图像，但你知道了大概的意思。

你试过把行放进你的跨距吗

像

...
...

您可以使用类似twitter引导的缩略图，而不是使用行来显示下面的图像和相关信息 下面是一个例子

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

缩略标签
缩略标题


...

您可以在这里找到一个示例：

CSS3中也有一个指令，但据我所知，它还没有推出

---

更新：在css3中，它被称为flexbox，但目前只有chrome支持它的一些功能。更多信息

我最后只是将每个图像和相应的文本放在同一行和同一列中。

---

图片下方的文本

您使用的是引导3x吗

新的网格系统允许您为不同的屏幕大小设置自己的跨度大小，这样您就可以确保所有行按照您想要的方式排列

例如：

<div class="col-lg-2 col-md-1 col-xs-1"></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>

Lorem Ipsum dolor集amit

Lorem Ipsum dolor集amit

然后为方框容器和段落容器留出一些宽度

你也可以用另一种方式。当您在移动视图上时，这将自动堆叠

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

Lorem Ipsum dolor集amit

Lorem Ipsum dolor集amit

Lorem Ipsum dolor集amit

图1
文本区域1
图2
文本区域2
图3
文本区域3

---

我希望它能工作。

我假设您使用的是bootstrap 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>

…图像文本在此

…图像文本在此

…图像文本在此

这样，您就可以在所有视图上正确显示列

请记住，Bootstrap3首先是移动的，从最小的视图到最大的视图，开发应该从理想的角度开始。 始终尝试将相关的dom元素保持在一起，以便它们在不同大小的布局上具有所需的行为

您只需要确保您的图像等于或大于较大的列空间宽度，并且您在图像上使用img响应类，以便正确缩放

还有其他方法可以实现这一点，但它们无法实现使用引导进行响应性布局的目的，并且由于没有充分的理由和类似的结果而变得更加复杂

为了更好地维护，在引导中尽量保持标记的简单和优雅，否则很容易在类的代码汤中丢失

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

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