flexbox + media query 实现响应式布局

	<style type="text/css">
	*{margin: 0; padding: 0;}
	/*body {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	align-content: center;
	}*/
	.row {
	display: flex;
	align-items:stretch;
	flex:auto;
	background-color: red;
	}
	.item {
	display: flex;
	height: 150px;
	flex:0 0 33%;
	align-items:center;
	justify-content:center;
	border: 1px solid #000;
	}
	@media screen and (min-width: 1620px) {
	.row {
	flex-direction: row;
	}
	}
	@media screen and (min-width:320px) and (max-width:500px){
	.row {
	flex-direction: column;
	}
	}
	@media screen and (max-width:320px){
	.row{
	background-color:blue;
	flex-direction: column-reverse
	}
	}
	</style>
	<div class="row">
	<div class="item">1</div>
	<div class="item">2</div>
	<div class="item">3</div>
	</div>