更改引導程序中的堆疊順序3

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

可以實現與.col-xx-pull-和.col-xx-push-內置網格類。認爲移動第一，首先將「2」山坳在HTML，然後使用推拉：

<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 2

的推拉類不能用於排序。 您可以通過多種方式實現您想要的效果：

1. Javascript/jQuery。查看insertBefore和insertAfter方法。
2. 使用flexbox。使用flexbox可以訪問屬性「訂單」。

我的選擇是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 
}); 

Answer 3

使用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>