2カラムのレスポンシブデザイン

responsive3.htmlとresponsive3.cssを開いてください。
パソコン表示は900px以上とします。
パソコン表示は2カラムで左にメイン（500px）、右にサイド（300px）です。それより小さいサイズの場合は2カラム表示せず、横幅いっぱいに広げます。
では、実際に2カラム表示のレイアウトをCSSでしてみましょう。

floatを使う場合

メインにfloat:left;を、サイドにfloat:right;と横幅をメディアクエリで指定してください。

.main, .side {
	width:100%;
}
@media ( min-width : 900px ){				
	.main {
		float: left;
		width: 500px;
	}
	.side {
		float: right;
		width: 300px;
	}
}
			

flexを使う場合

横に並べたいコンテンツの親要素にdisplay: flex;を指定してください。

.main, .side {
	width:100%;
}
@media ( min-width : 900px ){				
	.wrapper {
		display: flex;
		justify-content: space-between;
	}
}