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を使って、ブラウザ間の差異がないようにできるように。ですね！
勉強します！

Answer 1

grid がいいでしょう。
https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Grid_Layout

#wrapper {
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr 2fr 1fr;
  grid-template-areas:
    'main1 side'
    'main2 side'
    'footer side';
  gap: 20px;
  box-sizing: border-box;
  margin: 0 auto;
  padding: 20px 10px;
  height: 300px;
  border: 2px solid black;
}

#left, #right {
  display: contents;
}

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

#main1 {
  grid-area: main1;
}

#main2 {
  grid-area: main2;
}

#footer {
  grid-area: footer;
}

#side {
  grid-area: side;
}

@media screen and (max-width: 599px) {
  #wrapper {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 4fr 1fr;
    grid-template-areas:
      'main1'
      'main2'
      'side'
      'footer';
  }
}

Answer 2

以下の方法で解決しました。
① 「<div id="footer></div>」を#leftから外にだす（HTML）
② 「<div id="footer></div>」を一番下に配置（HTML）
③ cssより、#sideのheightを 100% + footerのheight分に指定（CSS）

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

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

#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% + 30px);
}

/* widthを合わせる */
#footer {
  margin-top: 0;
  width: calc(75% - 24px);
}


/*スマホ！*/
@media screen and (max-width: 599px) {
  #wrapper {
    width: auto;
  }

  #left,#right,#footer {
    width: 100%;
  }
 
  /* ここ */
  #side {
    margin-top: 0;
    height: 30px;
  }
}

Answer 3

モダンなやり方はGridだと思います。
Gridが使えない場合は、position:absolute;を使う方もあります。

https://codepen.io/mattari-panda/pen/oKNjXe

ちょっと発想を変えて、スマホをベースにHTMLを組み直しメディアクエリでPC用に組み替えています。
HTMLは構文が正しければ良いので、PCがベースでなくてはならないという事はありません。
（あくまで回答の一例です）