Bootstrap v4推拉網格類未按預期運行

Question

我正在嘗試使用Bootstrap v4（alpha 3）為我正在處理的Web應用程序創建響應式布局。

大部分情況下一切正常，但是我真正掙扎的是使用push和pull類對卡進行重新排序。 據我了解，正確使用push和pull類會對卡片進行重新排序，而布局的其余部分則響應文檔的“列排序”下“網格系統”部分中提到的順序更改：

使用.push-md- *和.pull-md- *修飾符類輕松更改內置網格列的順序。

可以在這里找到： http : //v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering

但是，當使用這些類時，似乎並不需要重新排序卡，而只是左右移動它們（以至於它們甚至可以重疊或離開屏幕，它們的CSS也建議使用此功能）。 這也意味着它們具有與偏移功能完全相同的功能，其目的是將卡移動x列數。

我過去曾經設法使它們按預期工作，但不知道如何工作。 所以有人可以告訴我我在做什么錯嗎？

HTML：

<div class="container">
    <div class="row">   
       <div class="card card1 col-lg-4 col-md-6"></div>
       <div class="card card2 col-lg-4 col-md-6"></div>
       <div class="card card4 col-lg-8 col-md-12 push-lg-4"></div>
       <div class="card card3 col-lg-4 col-md-6 pull-lg-8"></div>        
    </div>
</div>

CSS：

.card{height: 150px;}
.card1{background-color:red;}
.card2{background-color:blue;}
.card3{background-color:green;}
.card4{background-color:yellow;}

JSFIDDLE： https ：//jsfiddle.net/61yoqkjk/5/

預期的行為是，在大尺寸或更高尺寸的情況下，綠色框將向上移動，與紅色框和藍色框位於同一行。 但是，相反，綠色和黃色的框會交換位置，但是藍色框的右邊現在有一個適合綠色框的間隙。

Bootstrap 3也對此進行了嘗試，因此我認為這不是錯誤。 我也檢查了其他類似的問題，但他們的答案似乎都無法解決我的問題。

Answer 1

我認為您可能會誤解引導程序的工作原理。 您希望元素通過拉/推某種方式“切換其位置”（僅使用css很難實現）。 相反，引導程序所做的是幫助程序類push-xx和pull-xx在視覺上移動元素。 例如pull-lg-8的代碼是：

.pull-lg-8 {
    right: 66.666667%;
}

...並且這不會影響其他元素。 想象一下，瀏覽器首先通過使用諸如width, height, float, display, ...等屬性來計算每個元素的布局框，然后在每個元素都有其所屬的特定位置之后，將相對定位的元素視覺上移至一個不同的位置（如果使用的是right, top, bottom or left ）。 從結構的角度來看，它們仍然占據相同的空間，並且不會影響其他元素。

因此，您的黃色元素（對於第一行來說太大了）位於第二行，占據了2/3的空間，而您的綠色元素在第二行的右邊具有其框，然后將其推向2/3以左邊。