Bootstrap列重新排序

Question

嗨，大家好新手来引导，需要一些有关列重新排序的帮助。我已经阅读了关于推送和拉取课程的bootstrap网站上的文档，但是我对它有所了解。所以任何帮助将不胜感激！

桌面

`[Image1][text1][Image2][text2]`

`[image3][text3][image4][text4]`

平板

`[image1][image2]
 [text1][text2]
 [image3][image4]
 [text3][text4]`

移动

`[image1]
 [text1]
 [image2]
 [text2]
 [image3]
 [text3]
 [image4]
 [text4]`

JSFIDDLE：https://jsfiddle.net/DTcHh/16908/

Answer 1

你有点不清楚。 您在问题中提供的方案代表了Bootstrap的响应能力。

例如，在平板电脑上，行将被拆分，以便在响应性方面提供更好的用户体验，或者用简单的话说 - 没有水平滚动（只要它依赖于Bootstrap，并且您不做任何影响的添加这个概念）。

如果屏幕较小，正常显示项目将导致水平滚动，这是我们试图避免的，所以这就是它出现的原因。

拉动

拉动和推动是操纵网格的方法，并推动或拉动（字面意思）列，就好像那里有实际的列，而没有。

我建议阅读this question，答案很清楚。

修改

对于您的问题，您应该将列拆分为行。例如：

<div class="container">
    <div class="row">
        <div class="col-md-4">Col 1</div>
        <div class="col-md-4">Col 2</div>
        <div class="col-md-4">Col 3</div>
    </div>
    <div class="row">
        <div class="col-md-4">Col 4</div>
        <div class="col-md-4">Col 5</div>
        <div class="col-md-4">Col 6</div>
    </div>
</div>

将会显示如下：

[Col 1] [Col 2] [Col 3]
[Col 4] [Col 5] [Col 6]

在移动设备上，就像这样：

[Col 1]
[Col 2]
[Col 3]
[Col 4]
[Col 5]
[Col 6]