ヘッダー・サイドバー・本文・フッターの4領域を、grid-template-areas で名前を付けて配置しています。HTML の並び順とレイアウトが切り離されているので、狭い画面では領域名の並びを書き換えるだけで縦積みになります。