Utilizing Bootstrap 3, I am attempting to stack grids on top of each other in the order of A, B, C, D, E.
While the mobile grid stacking works well, the issue arises when viewing it on desktop where the grids do not align as expected, particularly the box for E.
Below is the code snippet:
<div class="row">
<div class="col-md-8">
<!-- Main Hero Image -->
<p>A</p>
</div>
<div class="col-md-4">
<!-- Side Content-->
<p>B</p>
</div>
<div class="col-md-4 col-md-push-8">
<!--Music Player-->
<p>C</p>
<!--Upcoming Events-->
<p>D</p>
</div>
<div class="col-md-4 col-md-pull-8">
<!--Recent Events-->
<p>E</p>
</div>
</div>
The column sizes configured should be 8 for A & E, and 4 for B, C & D.