モバイルプラットフォームのブートストラップの右上にある列

Question

this threadで説明されているように、ブートストラップを使用してモバイルデバイスで表示されたときに正しいdivを表示しようとしています。デスクトップレイアウトを次の：

A | B 

そして、私の携帯のレイアウトを次のように

B 
A 

しかし、提案された以下のソリューションは、私のために働いていません。

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

私のコードは次のようになります。

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

をしかし、Bは、まだデスクトップビューの左側に表示されます。

私が間違っていることに関するアイデアとこれを修正する方法は？前もって感謝します。

Answer 1

col-lg-pushは両方ともdivです。上col-lg-pull-4を使用して、あなたの第二div ""

だからあなたの新しいコードは次のとおりです。

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

ワーキングJSFiddle：https://jsfiddle.net/v5a7ommf/1/

Answer 2

フォローコード以下： https://codepen.io/hardiksolanki/pen/GOKGOx

デスクトップビュー：A | B

モバイルビュー：

B 

A 

これは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; 
    } 
}