@media only screen and (min-width:600px) {
	body{
		font-size: 20px;
	}
	
	.wrapper {
		display: flex;
		/* kich hoat flex box*/
		flex-flow: row wrap;
		font-weight: bold;
		text-align: center;
	}

	.wrapper>* {
		padding: 10px;
		flex: 1 1 100%;
		/* cho tất cả phần tử bên trong có độ dài 100% và tỉ lệ chiếm không gian trống là như nhau*/
	}

	.header-flex-2 {
		background: tomato;
	}

	.footer-flex-2 {
		background: lightgreen;
		order: 4;
	}

	.main {
		text-align: left;
		background: deepskyblue;
		min-height: 400px;
        height: auto;
		order: 1;
		/* flex: 3 0px; */
		/* cho phần nội dung main ở giữa chiếm 3 phần không gian trống so với 2 phần aside bên cạnh */
		/* order: 2; */
	}

    img{
        max-width: 100%;
        height: auto;
    }
	.aside {
		flex: 1 1 100%;
	}

	/* 2 phần aside sẽ chỉ chiếm 1 phần không gian */
	.aside-1 {
		background: gold;
		height: 400px;
		order: 2;
	}

	.aside-2 {
		background: hotpink;
		height: 400px;
		order: 3;
	}
}

@media only screen and (min-width:1200px) {
	body{
		font-size: 16px;
	}

	.wrapper {
		display: flex;
		/* kich hoat flex box*/
		flex-flow: row wrap;
		font-weight: bold;
		text-align: center;
	}

	.wrapper>* {
		padding: 10px;
		flex: 1 100%;
		/* cho tất cả phần tử bên trong có độ dài 100% và tỉ lệ chiếm không gian trống là như nhau*/
	}

	.header-flex-2 {
		background: tomato;
	}

	.footer-flex-2 {
		background: lightgreen;
		order: 4;
	}

	.main {
		text-align: left;
		background: deepskyblue;
		min-height: 400px;
		flex: 3 0px;
		/* cho phần nội dung main ở giữa chiếm 3 phần không gian trống so với 2 phần aside bên cạnh */
		order: 2;
	}
    
	.aside {
		flex: 1 0 0;
	}

	/* 2 phần aside sẽ chỉ chiếm 1 phần không gian */
	.aside-1 {
		background: gold;
		height: auto;
		order: 1;
	}

	.aside-2 {
		background: hotpink;
		height: auto;
		order: 3;
	}
}