I am in need of assistance with getting the correct div to display on top when viewed on a mobile device using Bootstrap. The issue is discussed and resolved in this particular discussion. To clarify, I would like my desktop layout to appear as follows:
A | B
And for the mobile layout to be structured like this:
B
A
Despite attempting the solution provided, it does not seem to work correctly:
<div class="row">
<div class="col-md-6 col-md-push-6">B</div>
<div class="col-md-6 col-md-pull-6">A</div>
</div>
This is how my code looks currently:
<section id="kalender" class="kalender-section content-section text-center">
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-push-8 mx-auto">
B
</div>
<div class="col-lg-8 col-lg-push-4 mx-auto">
A
</div>
</div>
</div>
</section>
However, the "B" div still appears on the left side when viewed on a desktop.
If you have any insights on what might be going wrong, or suggestions on how to resolve this issue, your assistance would be greatly appreciated. Thank you for your help in advance.