Question

我有专栏，我想重新排序，但不知道如何。

移动订单：

<col-xs-12 col-sm-4>
<col-xs-12>
<col-xs-12 col-sm-4>
<col-xs-12>
<col-xs-12 col-sm-4>
<col-xs-12>

桌面应该是：

<col-xs-12 col-sm-4>
<col-xs-12 col-sm-4>
<col-xs-12 col-sm-4>
<col-xs-12>
<col-xs-12>
<col-xs-12>

我该怎么做？

Answer 1

所以你需要一次改变一个div。

让我们考虑一下这个HTML代码：

<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12" id="one"></div>
<div class="col-xs-12 col-sm-4"></div>
<div class="col-xs-12"></div>
<div class="col-xs-12" id="two"></div>
<div class="col-xs-12"></div>

我们将使用此jquery代码进行更改：

$(document).ready(function(){
    if(screen.width>=768){
        $('#one').addClass('col-sm-4');
        if($('#two').hasClass('col-sm-4')){
            $('#two').removeClass('col-sm-4');
        }
    }else{
        $('#two').addClass('col-sm-4');
        if($('#one').hasClass('col-sm-4')){
            $('#one').removeClass('col-sm-4');
        }
    }
});

我希望这就是你要找的东西。

Boostrap推/拉超过12 cols

1 个答案: