Right column on top in Bootstrap on mobile platform

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;
  }
}