在响应式设计中将顶部到底部的元素移动的最佳方法是什么

在响应式设计中将顶部到底部的元素移动的最佳方法是什么

使用Flexbox最好以响应方式对未知高度的元素进行重新排序。虽然对桌面浏览器的支持不是很好（IE是此处的主要限制因素，但支持从v10开始），但大多数移动浏览器
都 支持。

@media (max-width: 30em) {  .container {    display: -webkit-box;    display: -moz-box;    display: -ms-flexbox;    display: -webkit-flex;    display: flex;    -webkit-box-orient: vertical;    -moz-box-orient: vertical;    -webkit-flex-direction: column;    -ms-flex-direction: column;    flex-direction: column;        -webkit-box-align: start;    -moz-box-align: start;    -ms-flex-align: start;    -webkit-align-items: flex-start;    align-items: flex-start;  }  .container .first {    -webkit-box-ordinal-group: 2;    -moz-box-ordinal-group: 2;    -ms-flex-order: 1;    -webkit-order: 1;    order: 1;  }}

请注意，Flexbox可能会与其他布局方法发生冲突，例如典型的网格技术。设置为浮动的Flex项可能会在使用2009规范（

display: -webkit-box

）的Webkit浏览器中导致意外结果。