如何在响应Bootstrap 3中颠倒cols的顺序？ [英] How to reverse order of cols in responsive Bootstrap 3?

问题描述

DEMO： http://jsfiddle.net/su0ae5v9/

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 {
背景：鲑鱼; 
} 
  

我有其他行，其中图像位于左侧，描述位于右侧，然后在下一行反转。您可能需要展开jsfiddle预览才能看到它。

响应式（缩小）时，我希望图像始终位于顶部，并且位于底部，以便订单是

image

description

image

描述

...

仅CSS将是理想的，我已经有了一个jQuery解决方案，但需要在wondow.resize上工作，它很讨厌。

并且.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> 
  

DEMO: http://jsfiddle.net/su0ae5v9/

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

I have alternate rows where the image is on the left and description to the right, then reversed on the next row. You might have to expand the jsfiddle preview to see it.

When responsive (narrow), I want the image to always be on top and description at the bottom, so that the order is

image

description

image

description

…

CSS only would be ideal, I already have a jQuery solution but needs to work on wondow.resize and it's nasty.

解决方案

Using .pull and .push does the trick!

Updated Working DEMO: 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>

这篇关于如何在响应Bootstrap 3中颠倒cols的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！