Question

在xs宽度我需要第二列显示在顶部，然后是第一列，然后是第三列。我已经尝试过使用push和pull来实现这个目标，但它对我没有用，怎么会把列推到容器外面左右。

继承我的代码：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 one"></div>
        <div class="col-xs-12 col-sm-4 two"></div>
        <div class="col-xs-12 col-sm-4 three"></div>
    </div>
</div>

.one{
    background-color: red;
    height: 50px;
}

.two{
    background-color: green;
    height: 50px;
}

.three{
    background-color: blue;
    height: 50px;
}

Answer 1

使用flexbox。

.row {
  display: flex;
  flex-direction: column;
}

.one {
  background-color: red;
  height: 50px;
  order: 2;
}

.two {
  background-color: green;
  height: 50px;
  order: 1;
}

.three {
  background-color: blue;
  height: 50px;
  order: 3;
}

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-4 one"></div>
    <div class="col-xs-12 col-sm-4 two"></div>
    <div class="col-xs-12 col-sm-4 three"></div>
  </div>
</div>

Answer 2

您可以使用.col-xx-pull-和.col-xx-push-内置网格类来实现这一目标。首先考虑移动设备，然后在你的html中首先放置“2”col，然后使用pull-push：

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-4 col-sm-push-4 two">2</div>
        <div class="col-xs-12 col-sm-4 col-sm-pull-4 one">1</div>        
        <div class="col-xs-12 col-sm-4 three">3</div>
    </div>
</div>

.one {
    background-color: red;
    height: 50px;
}

.two {
    background-color: green;
    height: 50px;
}

.three {
    background-color: blue;
    height: 50px;
}

jsfiddle

Answer 3

推拉类不用于订购。您可以通过多种方式实现所需的结果：

的Javascript / jQuery的。查看方法insertBefore和insertAfter。
使用flexbox。使用flexbox可以访问该属性＆＃34; order＆＃34;。

我的选择是Flexbox。有关此检查的更多信息，请https://css-tricks.com/snippets/css/a-guide-to-flexbox/

我为你做了以下元素交换功能，如果你不想使用flexbox，它应该用作jQuery函数。

(function ($) {
$.fn.swapElements = function (opties) {
    //Variables
    var settings = $.extend({
        targetResolution: 768, //Trigger swapping of elements on this resolution
        changeWith: '', //Which element should be swapped $('#object2')
        changeSpeed: 30,
        resize: true //Check for resize event
    }, opties);

    var a = this;
    var b = settings.changeWith;
    var tmp = $('<span>').hide();

    var doSwap = function () {
        var windowWidth = $(window).width();
        var firstElement = $('#' + a.attr('id') + ', #' + settings.changeWith.attr('id')).first().eq(0).attr('id');
        if (windowWidth <= settings.targetResolution && firstElement === a.attr('id')) {
            a.before(tmp);
            b.before(a);
            tmp.replaceWith(b);
        } else if (windowWidth > settings.targetResolution && firstElement === b.attr('id')) {
            b.before(tmp);
            a.before(b);
            tmp.replaceWith(a);
        }
    }

    $(document).ready(function () {
        doSwap();
    });

    if (settings.resize) {
        //Check on resize
        $(window).resize(function () {
            clearTimeout($.data(this, 'resizeTimer'));
            $.data(this, 'resizeTimer', setTimeout(function () {  
                doSwap();
            }, settings.changeSpeed));

        });
    }
    return this;
};
}(jQuery));

可以这样使用：

$('#el1').swapElements({
changeWith: $('#el2'),
//        changeSpeed: 30,
//        targetResolution: 768,
//        resize: true
});

更改bootstrap 3中的堆叠顺序

3 个答案: