In the process of developing a web application, I am using Bootstrap v4 (alpha 3) to create a responsive layout. Most elements are working well, however, I am facing difficulties rearranging my cards using the push and pull classes in Bootstrap. The intended functionality was for these classes to reorder the cards while ensuring that the rest of the layout adapts to this change as mentioned in the 'column ordering' section of the Grid system documentation:
It is possible to modify the order of built-in grid columns easily by utilizing .push-md-* and .pull-md-* modifier classes.
The detailed information can be found here:
However, upon implementing these classes, instead of reordering the cards, they simply shift them left and right causing overlap or potentially going off-screen, which aligns with their CSS indications. This behavior suggests similarities with the offset functions meant for moving a card by a certain number of columns.
I have previously managed to achieve the desired results with these classes but seem to have forgotten how. Thus, any insights on what might be going wrong would be greatly appreciated.
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/
When viewing at larger screen sizes, the expected outcome is for the green box to move up and align horizontally with the red and blue boxes. Instead, it appears that the green and yellow boxes switch positions, leaving an empty space after the blue box where the green box could fit.
Similar attempts were made using Bootstrap 3 without success, ruling out the possibility of a bug. I have also explored various related questions but none of the proposed solutions seem to resolve my particular issue.