自舉中不等高的Div重新排序3

Question

我知道這個問題有可能重複，但我找不到適合我的問題需要的解決方案。

我在這裏有一個佈局，需要從下面的中畫面重新排序。

大屏幕。 Iwant它，當它檢測到屏幕這種方式使用自舉3爲中等或低於

蔭，這是我的HTML佈局

<div class="row padding-none"> 
    <div class="col-lg-3 padding-none"> 
    </div> 
    <div class="col-lg-9"> 
    <div class="row padding-none"> 
      <div class="col-lg-10"> 
      </div> 
      <div class="col-lg-2"> 
      </div> 
     </div> 
    </div> 
</div> 

我擡頭看向引導文檔中有關push pull但我無法得到它的工作。我只想要黑色和橙色在中畫面和下面的切換位置。

對不起，我不能刪除。 ：） 謝謝。

Answer 1

您可以通過在標記中使用第一個橙色部分和第二個黑色部分來實現此目的。然後將float:right添加到兩者，以便它可視地交換位置。您可以使用media queries來定位不同的媒體，並刪除較小媒體中的float: right。 你也可以check here。

<div class="container"> 
<div class="row padding-none"> 
    <div class="col-lg-3 padding-none grey">section1</div> 
    <div class="col-lg-9"> 
     <div class="row padding-none"> 
      <div class="col-lg-2 orange">section 3</div> 
      <div class="col-lg-10 black">section 2</div> 
     </div> 
    </div> 
</div> 
</div> 

CSS

.orange, .black { 
    float:right; 
} 
@media(max-width:767px) { 
    .orange, .black { 
     float: none 
    } 
} 
@media(min-width:768px) { 
    .orange, .black { 
     float: none 
    } 
} 
@media(min-width:992px) { 
    .orange, .black { 
     float: none 
    } 
} 
@media(min-width:1200px) { 
    .orange, .black { 
     float: right 
    } 
} 

See Demo