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以左边。