フッターの全体構成
フッターは大きく5つのブロックに分けることが出来ます。
ナビゲーション
フッターのナビゲーションは、スマホ幅表示にすると２段になります。
スマホ幅のレイアウトを実現するためには、フレックスアイテムを折り返して（改行して）表示させます。
「flex-wrap」というcssプロパティを使用してみてください。
ただし、それだけでは完成図のようなレイアウトにはなりません。
liタグの幅が画面幅の50％になるように設定してください。
店舗情報
店舗の場所や営業時間が書いてあるエリアを作りましょう。
まず全体を囲う<div>を作り、スタイルを設定するためにクラスを命名します（※この課題では footer_text としています）。
それぞれの項目を「col-5」クラスのdivで囲います。
そして、flex-wrapプロパティを使って「footer_text」内のアイテムが折り返して配置される＝２段になるように設定します。
スマホ幅の設定
「footer_text」内にある４つの項目は、スマホ幅では１項目ずつ縦並びにします。
この時にContact、Open…と表示される順番が変わってしまうはずです。
【例】
これを解消する為に使用するのが、コーディング要点でもご紹介したorderというcssプロパティです。
それぞれのブロックにorderを設定できるよう、下記のようにCSSクラスを追加すると便利です。
<p class="col-5 f_contact"></p>
<p class="col-5 f_access"></p>
pではなくdivを使ったり、別の方法で行って頂いても構いません。
orderプロパティ詳細はorder - MDN Web Docsをご確認ください。