CSS/CSS3切換元素的位置

Question

我在HTML的桌面視圖中有4列。 當我們切換到移動視圖時，我們顯示2列和2行（請參閱附圖以供參考）。

的代碼是：

<div class="sections"> 
    <div class="one-fourth-col">Column 1</div> 
    <div class="one-fourth-col">Column 2</div> 
    <div class="one-fourth-col">Column 3</div> 
    <div class="one-fourth-col">Column 4</div> 
</div> 

我在手機版中得到的觀點是：

我想以下幾種觀點：

基本上，我想要在第一列中顯示＃1和＃2在左邊的mn。 右側第二列＃3和＃4。

我在css中使用float：right屬性。 我想通過不移動HTML中的元素來處理這個問題。

感謝您的幫助。

Answer 1

如果使用CSS Flexible Box Layout是一個選項，你可以簡單地實現，通過order荷蘭國際集團在移動屏幕上的柔性物品（經@media查詢）：

Example Here

.sections { display: flex; flex-wrap: wrap; } 

.one-fourth-col { 
    flex: 1; 
    margin: 0 1%; 
} 

@media (max-width: 767px) { 
    .one-fourth-col { 
    flex: 1 48%; /* Actually it should be 50% 
        but there's a margin of 1% 
        around the columns, hence 50%-2(1%) = 48% */ 
    } 

    .sections > :nth-child(1) { order: 1; } 
    .sections > :nth-child(2) { order: 3; } 
    .sections > :nth-child(3) { order: 2; } 
    .sections > :nth-child(4) { order: 4; } 
} 

（供應商前綴省略由於簡潔）

對於供應商前綴點擊「切換編譯視圖」在演示（感謝Autoprefixer）。

最後但並非最不重要的，如果你不熟悉CSS Flexible Box Layout你可以參考以下資源：

• http://dev.w3.org/csswg/css-flexbox（該規範是你的朋友！）
• https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes
• http://www.html5rocks.com/en/tutorials/flexbox/quick/
• http://css-tricks.com/snippets/css/a-guide-to-flexbox/
• http://weblog.bocoup.com/dive-into-flexbox/

Answer 2

你可以通過css transform和@media查詢： - 不是很優雅，但工作得很好。

的jsfiddle - DEMO或Full Screen

HTML：

<div class="sections"> 
    <div style="background-color: #ADFF2F;" class="one-fourth-col div-1">Column 1</div> 
    <div style="background-color: #0066FF;" class="one-fourth-col div-2">Column 2</div> 
    <div style="background-color: #FFA500;" class="one-fourth-col transform div-3">Column 3</div> 
    <div style="background-color: #FF00FF;" class="one-fourth-col transform div-4">Column 4</div> 
</div> 

CSS：

body { 
    margin: 0px; 
} 
.sections { 
    margin-top: 50px; 
} 
.one-fourth-col { 
    width: 20%; 
    margin: 2.5%; 
    padding: 25px 0px; 
    text-align: center; 
    float: left; 
} 
@media (max-width: 767px) { 
    .one-fourth-col { 
     float: none; 
     width: 40%; 
     margin-right: 0px; 
     margin-bottom: 0px; 
    } 
    .transform { 
     -webkit-transform: translate(100%, -200%); 
     -moz-transform: translate(100%, -200%); 
     -ms-transform: translate(100%, -200%); 
     -o-transform: translate(100%, -200%); 
     transform: translate(100%, -200%); 

     margin-left: 15%; /* 3 X Value of div-1 and div-2 margin-left */ 
    } 
    .div-1 { 
     margin-left: 5%; 
    } 
    .div-2 { 
     margin-left: 5%; 
     margin-top: 50px; /* margin between rows */ 
    } 
    .div-3 { 
     margin-top: -50px; /* negative value of .div-2 margin-top */ 
    } 
    .div-4 { 
     margin-top: 50px; /* same value of .div-2 margin-top */ 
    } 
} 

更多資訊 - CSS跨形式：

• http://www.w3.org/TR/css3-transforms/

• https://developer.mozilla.org/en-US/docs/Web/CSS/transform