響應式設計 - 堆疊2個div，但第一個進入新行

Question

在響應頁面中，我必須堆疊2個div。簡單的任務，但我希望第一個div進入新行。所以它不必遵循頁面的「正常」流程。 這是可能的和如何？任何幫助？ 謝謝！

Answer 1

響應式網格系統通常使用相對定位以及float或flexbox。該flexbox方法可以更容易地扭轉網格列的順序...

/* smaller - mobile widths */ 
.container-flex { 
    display:flex; 
    flex-direction: column-reverse; 
} 

.container-flex>div { 
    background: #eee; 
    width: 100%; 
} 

/* larger widths */ 
@media (min-width: 992px) { 
    .container-flex { 
     flex-direction: row; 
    } 
    .container-flex>div { 
     width: 50%; 
    } 
} 

http://www.codeply.com/go/1Je6BkNrjR