Rechte Spalte oben in Bootstrap auf der mobilen Plattform

Question

Ich versuche, das richtige div zu bekommen, wenn es auf einem mobilen Gerät mit Bootstrap angezeigt wird, wie in this thread erklärt und beantwortet, was bedeutet, ich möchte meine Desktop-Layout als aussehen folgt:

A | B 

Und mein Handy Layout wie folgt:

B 
A 

Allerdings ist die vorgeschlagene folgende Lösung nicht für mich arbeiten:

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

Mein Code sieht wie folgt aus:

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

Aber B noch auf der linken Seite auf einem Desktop-Ansicht angezeigt.

Irgendwelche Ideen, was ich falsch mache, und wie man das beheben kann? Vielen Dank im Voraus.

Answer 1

Sie verwenden col-lg-push unter div. Verwenden Sie col-lg-pull-4 auf Ihrem zweiten div "A"

So wird Ihre neue Code ist:

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

Arbeits JSFiddle: https://jsfiddle.net/v5a7ommf/1/

Answer 2

Folgen unten Code: https://codepen.io/hardiksolanki/pen/GOKGOx

Desktop-Ansicht: A | B

Mobile Ansicht:

B 

A 

Dies kann auch mit boo-Trap möglich sein.

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