非对称 bootstrap 布局

Question

我是 bootstrap.I 的新手，在 Bootstrap row/column 订购方面需要帮助。我有 3 行和 2 列的图像和每个图像的文本：

网页布局：

图片1 文字1

文字2 图片2

图片3 文字3

网页布局很好。但是，在移动设备上它看起来（如预期的那样）：

图片1

文字1

文本2

图片2

图3

文本3

我希望移动布局类似于：

图片1

文字1

图片2

文本2

图3

文本3

Answer 1

这是 Bootstrap 中的默认行为 - 看看 http://getbootstrap.com/css/#grid-column-ordering

您可以使用推拉类在折叠时重新排序列

Answer 2

像这样使用 Bootstrap 的 push 和 pull 类..

 <div class="row">
        <div class="col-md-6">Image1</div>
        <div class="col-md-6">Text1</div>
        <div class="col-md-6 col-md-push-6">Image2</div>
        <div class="col-md-6 col-md-pull-6">Text2</div>
        <div class="col-md-6">Image3</div>
        <div class="col-md-6">Text3</div>
    </div>

演示：http://codeply.com/go/86DRUFtMmR

非对称 bootstrap 布局

Un symmetric bootstrap layout

html

javascript

css

mobile

twitter-bootstrap

网页布局：