HTML&CSSで、画像とテキストを横並びにして、テキストは見出しと本文で段落をつけたい

前提・実現したいこと

サイト模写の練習で
https://aoinagase.github.io/KuriCafe/
を参考にしているのですが
実現したい表示にすることができず、苦戦しております。

どなたか、ご教示いただけますと幸いです。
何卒、よろしくお願いします。

該当のソースコード

■HTML
<!-見出し2->
  <div class="wrapper-2">
    <div class="section-2">
      <h2>見出し2</h2>
    </div>
    <div class="shop">
    <img src="04.png">
    <h3>タイトルが入ります</h3>
    <p>なんとかなんとか</p>
    <a href ="#" class = btn btn-outline-Success>詳細</a>
    </div>
    </div>
    <div class="shop">
    <h3>タイトルが入ります</h3>
    <p>なんとかなんとか</p>
    <a href ="#" class = btn btn-outline-Success>詳細</a>
    <img src="05.png">
    </div>
  </div>

■CSS
.menu-list{
    display: flex;
    
}

.menu{
    margin: 0 auto;
    
}

.section-2{
    text-align: center;
}

.shop{
    display:flex;
}

実現したい表示

現在の表示

行動規範の内容に同意します

回答1件

ベストアンサー

こんな感じでしょうか

css
1<style>
2h2{
3  text-align:center;
4}
5.section-2,.shop{
6  display:flex;
7  flex-wrap:wrap;
8}
9.wrapper-2,.shop:nth-child(2n){
10  flex-direction:row-reverse;
11}
12.section-2,.shop{
13width:100%;
14}
15.shop > div{
16width:50%;
17}
18</style>
19
20
21<div class="wrapper-2">
22  <h2>見出し2</h2>
23  <div class="section-2">
24    <div class="shop">
25      <div>
26        <img src="04.png" alt="04" width="100" height="100">
27      </div>
28      <div>
29        <h3>タイトルが入ります</h3>
30        <p>なんとかなんとか</p>
31        <a href ="#" class = btn btn-outline-Success>詳細</a>
32      </div>
33    </div>
34    <div class="shop">
35      <div>
36        <img src="05.png" alt="05" width="100" height="100">
37      </div>
38      <div>
39        <h3>タイトルが入ります</h3>
40        <p>なんとかなんとか</p>
41        <a href ="#" class = btn btn-outline-Success>詳細</a>
42      </div>
43    </div>
44  </div>
45</div>