非对称引导布局答案

【问题标题】：Un symmetric bootstrap layout非对称引导布局
【发布时间】：2015-06-27 08:59:18
【问题描述】：

我是 bootstrap 新手。我需要有关 Bootstrap 行/列排序的帮助。每张图片都有 3 行 2 列的图片和文字：

网页布局：

图像1 文本1

文字2图片2

图片3文字3

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

图片1

文本1

文本2

图片2

图片3

文本3

我希望移动布局类似于：

图片1

文本1

图片2

文本2

图片3

文本3

【问题讨论】：

标签： javascript html css twitter-bootstrap mobile

【解决方案1】：

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

您可以使用 push 和 pull 类在折叠时重新排序列

【讨论】：

【解决方案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

【讨论】：