row-reverseにならない

前提・実現したいこと

よくあるレイアウトだと思いますが、item2だけ画像と.text-innerの順番を逆にし、画像（右）.text-inner（左）の配置にしたいです。
一応.reverseを使いまわせるよう定義してあり、それを付与することでreverseにできるような構成にしています。

どうぞご教授よろしくお願いいたします。

発生している問題・エラーメッセージ

reverseにならない（変化なし）

該当のソースコード

html
1 <div class="main-content-wrapper">
2          <div class="content-item item1">
3            <picture class="img-inner"> 
4              <source class="content-item item-img1 pc" srcset="../img/oheya01-min.png" alt="" media="(min-width: 700px)"/><img class="content-item item-img1 sp" src="../img/oheya01@2x-min.png" alt=""/>
5            </picture>
6            <div class="text-inner syoukai-bg"> 
7              <h2 class="content-title">温泉付き客室</h2>
8              <p class="setumei">温海の源泉かけ流し露天風呂付き客室になります。<br> あなただけの上質な安らぎのひとときを。</p>
9              <p class="attention">＊部屋数に限りがございます。<br> ＊洗い場はないため、お体を先に大浴場でお流しになって頂く必要があります。</p>
10            </div>
11          </div>
12          <div class="content-item item2 reverse">
13            <picture class="img-inner"> 
14              <source class="content-item item-img1 pc" srcset="../img/oheya02-min.png" alt="" media="(min-width: 700px)"/><img class="content-item item-img1 sp" src="../img/oheya02@2x-min.png" alt=""/>
15            </picture>
16            <div class="text-inner syoukai-bg">
17              <h2 class="content-title">庭園付き客室</h2>
18              <p class="setumei">庭園付きの客室になります。 お庭を見ながら、ほっとするひとときをお過ごしください。</p>
19              <p class="attention">＊お庭は複数のお客様と囲む形になります。<br> ＊部屋数に限りがあります。<br> ＊ご希望の方は「お抹茶/500円」をルームサービスさせていただきます。</p>
20            </div>
21          </div>
22          <div class="content-item item3">
23            <picture class="img-inner"> 
24              <source class="content-item item-img1 pc" srcset="../img/oheya03-min.png" alt="" media="(min-width: 700px)"/><img class="content-item item-img1 sp" src="../img/oheya03@2x-min.png" alt=""/>
25            </picture>
26            <div class="text-inner syoukai-bg"> 
27              <h2 class="content-title">一般客室</h2>
28              <p class="setumei">最もベーシックな客室になります。伝統の中にモダンさを取り入れた 内装となっており、とても過ごしやすくしていただけます。</p>
29              <p class="attention">＊全室お部屋より日本海を望むことができます。</p>
30            </div>
31          </div>
32        </div>

該当のソースコード

SCSS
1@import 'va';
2@import 'headerall';
3@import 'footerall';
4html{
5font-size:62.5%;
6body{
7  line-height:1.8;
8  width:100%;
9  font-size:1.6rem;
10 font-family: '游明朝体', serif;
11 a{
12   color:$white;
13   text-decoration: none;
14 }
15  .btn{
16 text-decoration: none;
17 
18 @include btn;
19 padding:1vw 2vw;   
20 
21  
22 }
23
24 
25 img{
26 max-width:100%;
27 vertical-align: bottom;
28 }
29.section-wrapper{
30padding:5vw;
31}
32 .content-wrapper{
33   margin:0 auto;
34   text-align: center;
35   max-width:1180px;
36 }
37 .relative{
38 position:relative;
39 }
40
41 .absolute{
42   position:absolute;
43 }
44 
45 .flex-box{
46     display: flex;
47     justify-content: center;
48     align-items:center;
49 }
50 .flex-between{
51   display: flex;
52   justify-content: space-between;
53   align-items:center;
54 }
55 .reverse{
56   flex-direction: row-reverse;
57   display: flex;
58   align-items:center;
59  
60 
61 }
62 h2{
63   font-size:3.6rem;
64   font-weight:bold;
65 }
66 h3{
67   font-size:2.8rem;
68   font-weight:bold;
69 }
70
71
72.text-inner{
73  background-image:url(../../img/bg-min.png);
74  background-position:center;
75  background-size:cover;
76  padding:2vw;
77 padding-left:20.5vw;
78width:35vw;
79text-align: left;
80margin-left:auto; 
81//centerだと写真の分左に寄ってしまうから
82
83
84
85}
86.item1,.item2,.item3{
87  position:relative;
88}
89picture{
90position:absolute;
91top:-42%;
92width:80vw;
93left:-5%;
94}
95.content-item{
96  display: flex;
97  padding:5vw 0;
98  justify-content: space-between;
99  &:nth-of-type(2){
100    color:red;
101    flex-direction: row-reverse;
102  }
103  
104.setumei{
105  padding:3vw 0;
106}
107
108}
109}}

試したこと

■.reverseクラスをpugの方でつけるのではなく、scssの方で、flex-directionしてみる
→効果なし

scss
1.content-item{
2  display: flex;
3  padding:5vw 0;
4  justify-content: space-between;
5  &:nth-of-type(2){
6
7    flex-direction: row-reverse;
8  }
9 
10
11}

■reverseそのものがおかしい説
→上記を疑って、試しに.text-inner部で付与したところ、その範囲内の文章はきちんとreverseされた

理想と現状

■理想形はこちらになります。

■現状はこちらになります。
※文字が赤いのは:nth-of-type(2)が対象にきいているか確認するためだけにしたものなのでお気になさらず

補足情報（FW/ツールのバージョンなど）

OS:Windows
エディタ:VCcode
ブラウザ:クローム

kei344

2021/06/17 10:08

質問タグ「Flex」はCSSとは関係ないものなので削除しましょう。

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

回答2件

ベストアンサー

このようなボックスに重ね合わせのあるデザインであれば、flexを使わず、双方positionをabsoluteにしてleftとright、topで位置決めをしてあげたほうが簡単な実装になるのではと思います。
互い違いは :nth-child(2n)を利用し、leftとrightの値を逆にすれば良いです。

codepenでのデモ

※デモは質問文のコードは全く参照せず作っていますのでこの手法を利用するのであれば現状のコードにうまくアダプションさせてください。

投稿2021/06/17 09:15

編集2021/06/17 09:17