flex-direction: row-reverseについて

HTML
1コード
2<section class="service">
3    <div class="service-inner">
4      <div class="service-box">
5        <div class="service-item">
6          <div class="service-item-image"><img src="./img/item1.png" alt=""></div>
7          <div class="service-item-desc">
8            <div class="service-item-title">丁寧なカウンセリング</div>
9            <div class="service-item-text">歯科用CTや口腔内スキャナーを導入し、患者さんにとってわかりやすい治療を心掛けています。治療計画を明確にして、患者さんが納得したうえで治療を開始します。治療中でも、患者さんと実際にお話をしながら、今後の治療の方向性を決めていきお互いに納得しながら治療を進めていきます。</div>
10          </div>
11        </div>
12      </div>
13
14      <div class="service-box">
15        <div class="service-item">
16          <div class="service-item-image"><img src="./img/item2.png" alt=""></div>
17          <div class="service-item-desc">
18            <div class="service-item-title">最新CTでの治療</div>
19            <div class="service-item-text">高分解能多列検出器の搭載により、０.5mmの分解能にて1回転の撮影で64枚の画像得ることができます。 これにより従来の輪切り画像だけでなくさまざまな角度の断面の画像や高分解能３Ｄ画像（３次元画像）も短時間で得ることが可能となったためより適切な治療やアドバイスができるようになっています。</div>
20          </div>
21        </div>
22      </div>
23
24      <div class="service-box">
25      <div class="service-item">
26        <div class="service-item-image"><img src="./img/item3.png" alt=""></div>
27        <div class="service-item-desc">
28          <div class="service-item-title">マウスピース矯正</div>
29          <div class="service-item-text">見た目では分かりづらく、痛みや不快感も少なく、矯正できます。スポーツ用や、睡眠時無呼吸症候群(SAS)用、睡眠時の歯ぎしりや食いしばり対策のマウスピースなどもお作りできます。保険などの適用で製作できますので、ぜひお気軽にお問合せください。
30          </div>
31        </div>
32      </div>
33    </div>
34
35    <div class="service-box">
36      <div class="service-item">
37        <div class="service-item-image"><img src="./img/item4.png" alt=""></div>
38        <div class="service-item-desc">
39          <div class="service-item-title">インプラント</div>
40          <div class="service-item-text">インプラントとは1cm程度のチタン製の人口歯根のことです。 この人工歯根を、歯の失ったところの顎の骨に埋め込み、その上から歯の被せ物をしてご自身の歯として噛めるように機能回復させることをインプラント治療と言います。当院では、世界三大インプラントメーカのアストラテック社のインプラントを使用して治療をいたします。</div>
41        </div>
42      </div>
43    </div>
44
45    <div class="service-box">
46      <div class="service-item">
47        <div class="service-item-image"><img src="./img/item5.png" alt=""></div>
48        <div class="service-item-desc">
49          <div class="service-item-title">ホワイトニング</div>
50          <div class="service-item-text">歯を削らずに、専用の薬剤を使って蓄積した着色を漂白し、歯を白くします。オフィスホワイトニングとホームホワイトニング、デュアルホワイトニングの3手法のいずれかを患者さまに選んでいただき、それぞれの特徴を生かしながら治療し、より早く長持ちするように治療していきます。</div>
51        </div>
52      </div>
53    </div>
54
55    <div class="service-box">
56      <div class="service-item">
57        <div class="service-item-image"><img src="./img/item6.png" alt=""></div>
58        <div class="service-item-desc">
59          <div class="service-item-title">歯周病治療</div>
60          <div class="service-item-text">歯周病は症状が進行するまで、病気と自覚されることが少ない病気です。歯周病の進行状態によって症状は違い、初めのうちは歯ぐきの赤みや腫れ、出血、口臭といった症状になってきますが、重度になると歯周病歯を支える骨(歯槽骨)が溶け、歯が抜けてしまうこともあるため早めの受診と治療をお勧めいたします。</div>
61        </div>
62      </div>
63    </div>
64    </div>
65  </section>
66
67
68scss
69.service-box {
70  width: 100%;
71
72  &:nth-child(even) {
73    background: $color-background;
74  }
75}
76
77.service-item {
78  display: flex;
79  width: 1200px;
80  margin: 0 auto;
81  padding: 90px 0;
82  &:nth-child(even) {
83    flex-direction: row-reverse;
84  }
85
86  @include mq('sp') {
87    display: block;
88    width: 100%;
89    padding: 0 16px;
90
91  }
92}
93```### 前提
94
95ここに質問の内容を詳しく書いてください。
96
97### 実現したいこと
98
99要素の偶数の画像とテキストを逆にしたいです
100
101
102### 該当のソースコード
103
104scss
105service-item {
106  display: flex;
107  width: 1200px;
108  margin: 0 auto;
109  padding: 90px 0;
110  &:nth-child(even) {
111    flex-direction: row-reverse;
112  }
113
114  @include mq('sp') {
115    display: block;
116    width: 100%;
117    padding: 0 16px;
118
119  }
120}
121

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

回答1件

:nth-child()疑似クラスは、兄弟の何番目、というものですので、一人っ子の.service-itemには効かないです。

css
1.service-box {
2  width: 100%;
3
4  &:nth-child(even) {
5    background: $color-background;
6    .service-item{
7      flex-direction: row-reverse;
8    }
9  }
10}