Bootstrap v4 push and pull grid classes aren't working as expected

Question

I am trying to use Bootstrap v4 (alpha 3) to create a responsive layout for a web application that i'm working on.

Everything works for the most part but what i'm really struggling with is reordering my cards using the push and pull classes. It was to my understanding that the push and pull classes reordered the cards when used correctly while the rest of the layout responded to the change of order as mentioned in the Grid system section of the docs under 'column ordering':

Easily change the order of our built-in grid columns with .push-md-* and .pull-md-* modifier classes.

which can be found here: http://v4-alpha.getbootstrap.com/layout/grid/#example-column-ordering

However, when using these classes it seems to, instead of reordering the cards, just move them left and right (to the point where they can even overlap or go off screen, this functionality is also suggested by their css). This also implies that they have the exact same functionality as the offset functions, who's purpose is to move a card by x number of columns.

I have managed to get them working as expected in the past before, but have no idea how. So can someone please tell me what i'm doing wrong?

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/

The expected behavior is that at large sizes and higher, the green box will be moved up to be on the same line as the red and blue boxes. However, instead the green and yellow boxes swap places but there's now a gap to the right of the blue box where the green box could fit.

This has been tried with Bootstrap 3 as well so I don't think this is a bug. I have also checked through other similar questions but none of their answers seem to fix my problem.

Answer 1

I think you might be misunderstanding, how bootstrap works. You want, that the elements some sort of "switch their position" by pulling/pushing them (which is very hard to achieve with css only). What bootstrap does, instead, is that the helper classes push-xx and pull-xx move the elements visually around. Eg the code for pull-lg-8 is:

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

...and this does NOT affect the other elements. Imagine, that the browser first calculates the layout box for each element by using properties like width, height, float, display, ... and afterwards, after every element has a certain place where it belongs, the relative positioned elements are visually moved to a different place (if right, top, bottom or left was used). From a structural point of view, they still take the same space, though and don't affect the other elements.

Therefore your yellow element (which is too big for the first line) is in the second row taking 2/3 of the space, whereas your green element has its box in the second row at the very right and is afterwards pushed 2/3 to the left.