Reordering elements of unknown heights in a responsive fashion is best done with Flexbox. While support isn't great for desktop browsers (IE being the primary limiting factor here, support starts with v10), most mobile browsers do support it.
http://cssdeck.com/labs/81csjw7x
@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;
/* optional */
-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;
}
}
http://caniuse.com/#feat=flexbox
Be aware that Flexbox can clash with other layout methods, such as the typical grid techniques. Flex items that are set to float can cause unexpected results in Webkit browsers using the 2009 specification (display: -webkit-box).
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
