orderプロパティが正常に反応しないのを直したい。

実現したいこと

orderプロパティを使って左から[バナー画像]⇨[メインエリア]⇨[サイドバー]に変更したい。

発生している問題・分からないこと

Webデザインの勉強を始めたばかりの初心者です。左から[メインエリア]⇨[サイドバー]⇨[バナー画像]になっているサイトをorderプロパティで[バナー画像]⇨[メインエリア]⇨[サイドバー]に順序を変えようとした所、[サイドバー]⇨[バナー画像]⇨[メインエリア]となってしまいました。個人的には[display flex;]をどこかに入れていないのが原因かなと考えていますが、それが原因だった場合どこの部分に[display flex;]を入れれば良いのか分かっておりません。ご教授頂けますと幸いです。

該当のソースコード

HTML

1 <main class="wrapper news-contents"> 2 <article class="post"> 3 <header> 4 <h2 class="post-title">新メニューの試食イベントを開催します</h2> 5 <div class="post-info"> 6 <ul class="post-cat"> 7 <li><a href="#">お店の紹介</a></li> 8 <li><a href="#">イベント</a></li> 9 </ul> 10 <time class="post-date" datetime="2024-9-28">2024年9月28日</time> 11 </div> 12 </header> 13 <img class="post-thumbnail" src="images/WCBCafe/images/outside.webp" alt="店内の様子"> 14 <p> 15 これまでにない美味しいフードやドリンクを提供するため、チーム一丸となって新メニューの開発に取り組んできました。 16 皆さまに喜んで頂けるよう、自信を持ってご紹介できるメニューとなっております。 17 </p> 18 <p>当日は新しいメニューの一部を試食して頂けます。 19 新鮮な食材を使った料理や、自慢の特性ドリンクをご用意していますので、ぜひお越しください。 20 また、試食会に参加して頂いた方には、アンケートにご協力頂けるようお願いする予定です。 21 皆様の貴重なご意見を頂き、より良いメニュー作りに活かしていきたいと思います。 22 </p> 23 <p> 24 日時：10月7日(土) 11時から12時まで<br> 25 場所：カフェ内イベントスペース 26 </p> 27 <p> 28 定員に達した場合、お断りをさせていただくこともありますので、お早めにお申しこみください。 29 試食会でお会いできることを心から楽しみにしております。 30 </p> 31 </article> 32 <aside class="sideber"> 33 <h3 class="heading-medium font-english">category</h3> 34 <ul class="side-menu"> 35 <li><a href="#">お店の紹介</a></li> 36 <li><a href="#">期間限定メニュー</a></li> 37 <li><a href="#">お客様との会話</a></li> 38 </ul> 39 40 <h3 class="heading-medium font-english">Archives</h3> 41 <ul class="side-menu"> 42 <li><a href="#">2023年</a></li> 43 <li><a href="#">2022年</a></li> 44 <li><a href="#">2021年</a></li> 45 <li><a href="#">2020年</a></li> 46 </ul> 47 </aside> 48 <aside class="ad"> 49 <img src="images/WCBCafe/images/banner.jpg"="新メニュー登場"> 50 </aside> 51 </main>

CSS

1/* デスクトップ版 2 ----------------- */3 @media (min-width: 800px) {4/* NEWS */5.cover-news{6 background-image: url(images/WCBCafe/images/cover-news-l.webp);7}8.news-contents{9 display: flex;10 justify-content: space-between;11}12.post{13 width: 60%;14 order: 2;15}16.sidebar{17 width: 22%;18 order: 3;19}20.ad{21 order: 1;22}23.sidebar .heading-medium{24 line-height: 1;25 margin-bottom: 1rem;26}27 }

試したこと・調べたこと

上記の詳細・結果

親要素に[display flex;]を指定していないと子要素の[order]は動作しないことだけ理解しました。

補足

特になし