Right column on top in Bootstrap on mobile platform - html

Question

I'm trying to get the right div to be on top when viewed on a mobile device using Bootstrap, as explained and answered in this thread, meaning I want my desktop layout to look as follows:
A | B
And my mobile layout as follows:
B
A
However, the proposed following solution isn't working for me:
<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>
My code looks as follows:
<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>
But B is still shown on the left on a desktop view.
Any ideas on what I'm doing wrong, and how to fix this? Thank you in advance.

Answer 1

You are using col-lg-push on both div. Use col-lg-pull-4 on your second div "A"
So your new code is:
<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-pull-4 mx-auto">
A
</div>
</div>
</div>
</section>
Working JSFiddle: https://jsfiddle.net/v5a7ommf/1/

Answer 2

Follow below code:
https://codepen.io/hardiksolanki/pen/GOKGOx
Desktop view: A | B
Mobile view:
B
A
This can also possible with out boo-trap.
.desktop-left{
background: red;
float: right;
}
.desktop-right{
background: green;
float: left;
}
#media only screen and (max-width:980px) {
.desktop-right, .desktop-left{
float: none;
}
}