如何強制右側六列DIV在RWD上保持最佳狀態？

我使用一個自定義的12列網格，並給予行，如：如何強制右側六列DIV在RWD上保持最佳狀態？

<div class="row"> 
    <div id="the-pink" class="lg-6 md-12 sm-12"><!-- content --></div> 
    <div id="the-violet" class="lg-6 md-12 sm-12"><!-- content --></div> 
</div>

我試圖讓這個行爲：在中，小型設備每個塊將是12列寬，但默認情況下，#the-violet將低於#the-pink。我想反過來，那是#the-violet以上#the-pink。

我現在（簡體） SCCS是：

.row { 
    @include clearfix; 
    [class*="lg-"], 
    [class*="md-"], 
    [class*="sm-"] { 
     float: left; 
    } 
} 
.lg-6 { 
    width: 50%; 
} 
.md-12 { 
    @include respond-to("medium") { 
     width: 100%; 
    } 
} 
.sm-12 { 
    @include respond-to("small") { 
     width: 100%; 
    } 
}

我假設clearfix和respond-to混入是衆所周知的。

我做了與固定高度的方法給我排了一個名爲reversed像（Fiddle）類：

.reversed { 
    position: relative; 
    @include respond-to("small" "medium") { 
     .sm-12, 
     .md-12 { 
      position: absolute; 
      top: 0; 
      &::first-child { 
       top: 200px; 
      } 
     } 
    } 
}

但是，我想知道是否有人已經遇到此之前需要和有另一種解決方法是在清潔的方式（沒有固定高度）。

來源

2016-06-22 Jordi Nebot

引導程序使用拉和推類來做到這一點。 –

感謝您的建議@Paulie_D！我發現這篇文章（http://www.schmalz.io/2014/10/08/Column-Ordering-in-Bootstrap/）解釋了這個概念。我知道「推」類，而不是「拉」類。我會深入研究它在我的網格上實現這個解決方案。 –

你可以在它們上使用float: right並在HTML中以相反的順序寫入它們。

來源

2016-06-22 14:06:34 Johannes

我沒想到！這真的是一個簡單的選擇......無論如何，我更喜歡純粹的CSS解決方案。 –

如何強制右側六列DIV在RWD上保持最佳狀態？

回答

相關問題