响应式设计 - 堆叠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