Question

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-6 text-center">
            image
        </div>
        <div class="col-sm-6 text-center">
            desctiption
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center reverse">
            desctiption
        </div>
        <div class="col-sm-6 text-center reverse">
            image
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center">
            image
        </div>
        <div class="col-sm-6 text-center">
            desctiption
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center reverse">
            desctiption
        </div>
        <div class="col-sm-6 text-center reverse">
            image
        </div>
    </div>
</div>

CSS：

.container {
    background: beige;
}
.reverse {
    background: salmon;
}

我有备用行，图像在左边，描述在右边，然后在下一行反转。您可能需要展开jsfiddle预览才能看到它。

当响应（缩小）时，我希望图像始终位于顶部，而描述位于底部，因此顺序为

图像

描述

图像

描述

...

CSS只是理想的，我已经有了一个jQuery解决方案，但需要在wondow.resize上运行并且它很讨厌。

Answer 1

使用.pull和.push就可以了！

更新了工作演示：http://jsfiddle.net/knq9qrom/1/

HTML：

<div class="container">
    <div class="row">
        <div class="col-sm-6 text-center">
            image
        </div>
        <div class="col-sm-6 text-center">
            desctiption
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center col-sm-push-6 reverse">
            image
        </div>
        <div class="col-sm-6 text-center col-sm-pull-6 reverse">
            desctiption
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center">
            image
        </div>
        <div class="col-sm-6 text-center">
            desctiption
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6 text-center col-sm-push-6 reverse">
            image
        </div>
        <div class="col-sm-6 text-center col-sm-pull-6 reverse">
            desctiption
        </div>
    </div>
</div>

Answer 2

使用隐藏和可见类进行播放以产生所需的结果。 Bootstrap responsive utilities

<div class="container">
<div class="row">
    <div class="col-sm-6 text-center">image</div>
    <div class="col-sm-6 text-center">desctiption</div>
</div>
<div class="row hidden-xs">
    <div class="col-sm-6 text-center reverse">desctiption</div>
    <div class="col-sm-6 text-center reverse">image</div>
</div>
<div class="row visible-xs-block">
    <div class="col-sm-6 text-center">image</div>
    <div class="col-sm-6 text-center">desctiption</div>
</div>
<div class="row">
    <div class="col-sm-6 text-center">image</div>
    <div class="col-sm-6 text-center">desctiption</div>
</div>
<div class="row hidden-xs">
    <div class="col-sm-6 text-center reverse">desctiption</div>
    <div class="col-sm-6 text-center reverse">image</div>
</div>
<div class="row visible-xs-block">
    <div class="col-sm-6 text-center">image</div>
    <div class="col-sm-6 text-center">desctiption</div>
</div>

如何在响应式Bootstrap 3中反转cols的顺序？

2 个答案: