メディアクエリ時のdisplay flex

メディアクエリの実装をしています。
この部分なのですが、
パソコン版では、
img/img_recipe01.pngを左の要素に
img/label_point.pngと　h2をdisplay flexにし、
pと合わせて右の要素にして、display flexにしています。

ですが、スマホ版にする際に、
img/label_point.pngとh2をトップで横並びにし、
img/img_recipe01.pngとpを横ならびにする必要があります。

スマホ版を見据えてコードを書いていない私が悪いのですが、
この場合、HTML のコードを書き直す必要がありますでしょうか？
それともメディアクエリで実装することで
htmlは変えずに変更できますか？

html
1  <div id="class1" class="point-detail">
2              <div class="point-left">
3                <img src="img/img_recipe01.png">
4                </div>
5                <div class="point-right">
6                  <div class="inside-point-title">
7                  <div class="left-inside-point">
8                <img src="img/label_point.png"></div>
9                      <div class="right-inside-point">
10                        <h2>手作りオーダーメイド</h2></div></div>
11                <p>子どもの絵をデザイナーが一つ一つ手作りで再現します。同じ絵は世界に2つとないので、完全オリジナルのオーダーメイドです。
12また絵の裏側もデザイナーが想像して作り上げます。</p>
13                </div>
14              </div>

css
1
2.point {
3  display:flex;
4  flex-wrap:wrap;
5  width: 100%;
6  text-align: center;
7  margin: auto;
8
9}
10
11.point-wrapper {
12  width: 1080px;
13  margin: 0 auto;
14  padding-bottom: 100px;
15}
16
17
18.point-wrapper h1 {
19  text-align: center;
20  color: #60523D;
21  border: 3px solid #60523D;
22}
23
24.point-item {
25  color: #E6466A;
26  display: inline-block;
27  border: 3px solid #E6466A;
28  border-radius: 30px;
29  padding: 0 20px 0 20px;
30  width:48%;
31  box-sizing: border-box;
32  margin: 8px 8px;
33  display: flex;
34  transition-duration: 0.5s;
35}
36
37.point-item:hover {
38  transform: scale(1.05,1.05);
39  cursor: pointer;
40}
41
42.left-point-item {
43  width: 88px;
44  height: auto;
45  padding-right: 10px;
46  padding-top: 8px;
47}
48
49.right-point-item h2 {
50  border-bottom: 2px solid #E6466A;
51  padding-bottom: 5px;
52  font-size: 21px;
53}
54
55
56.point-detail {
57  display: flex;
58  justify-content:center;
59  margin-bottom: 40px;
60}
61
62.point-left img {
63  width: 378px;
64  height: auto;
65  border-radius: 30px;
66}
67
68.point-right {
69  width: 700px;
70  height:220px;
71  padding-left: 150px;
72}
73
74.point-right h2 {
75  color: #E6466A;
76  border-bottom: 2px solid #E6466A;
77  width: 580px;
78  display: inline-block;
79  padding-bottom: 10px;
80}
81
82.point-right img{
83  padding-right: 20px;
84}
85
86.point-right p {
87  color: #60523D;
88  line-height: 40px;
89  letter-spacing: 4px;
90}
91
92
93.inside-point-title {
94  display: flex;
95}
96