flexboxを使ってスマホの時要素の順序を変更

Question

お世話になってます。
CSSとHTMLの学習を1からしようと思い、現在はflexboxについて学習しています。

そして、今実現したいのがfloatを使わずに、レスポンシブに以下のような図を作りたいです。

■　デスクトップ

■ スマホ

下記のようにデスクトップの方はできていますが、このコードだと
スマホの幅にした時に、サイドがフッターの下にきてしまいます。
htmlで、footerを一番下にしてあげたいのですが、
そうなるとsideの高さがfooterの横まで伸びません。

<div id="wrapper">	
	<div id="left">
		<div id="main1">main1</div>
		<div id="main2">main2</div>
		<div id="footer">footer</div>	
	</div>
	<div id="right">
		<div id="side"></div>
	</div>
</div>

#wrapper {
  width: 1000px;
  margin: 0 auto;
  display: flex;
  border: 2px solid black;
}

#left {
  width: 75%;
}

#right {
  width: 25%;
}

#main1, #main2, #footer, #side {
  margin: 20px 10px;
  border: 2px solid black;
  text-align: center;
}

#main1, #footer {
  height: 50px;  
}

#main2 {
  height: 100px;   
}

#side {
  height: calc(100% - 44px);
}


@media screen and (max-width: 599px) {
  /*
   ここで、sideをフッターの上に入れ、
   結果、フッターを一番下にしたい
   */
}

どのようにしたら良いでしょうか。
floatではできるのですが、今回は極力使いたくないです。
お力を貸していただけますと嬉しいです。

Comments

[m.ts10806]

reset.cssは入れられましたか？

[退会済みユーザー]

こちら、choromeのみでとりあえず試したいなと思ってます。
この後、autoprefixerを使ってブラウザ対応したいと考えています。

[m.ts10806]

あれ？通じてない・・？
https://webdesign-trends.net/entry/8137

[退会済みユーザー]

これは...
リセットCSSというものがあるというのを、今知りました...
ありがとうございます。flexboxの問題が解決したのち、調べて入れてみます。。

[m.ts10806]

wrapperにボーダーがあるうえで内部のwidthが75%25％になってるのではみ出る可能性ありそうだなぁと思っては見てました（コードを実際に動かしたわけではないですが）
要素にはデフォルトで持っている幅とか（特にpadding,margin）があるので個別に0をいれるくらいならreset.cssでリセットしておいてブラウザ間の差がないようにしてから対応したほうがスムーズにいくことも多いです。

[退会済みユーザー]

ありがとうございます。
#wrapperは、内部のwidthを1000pxにして固定し、#leftと#rightで3:1にして、margin等は使っていないのでbox自体は問題なかったです。

reset.cssを使って、ブラウザ間の差異がないようにできるように。ですね！
勉強します！