画像とテキストを交互に横並び２段の横並びを解除して縦並びにしたい

Question

display-directionでテキストと画像を交互に２段でレイアウトした部分をレスポンシブにするために縦並びに戻したいのですが、１段目しか解除できません。

ｈ3とpタグが上、画像が下の並びにしたいのですがservice2の部分はどうしたらできるでしょうか。
調べてでてきた下記も試してみましたがそもそも適用されませんでした。

<試したこと>
・flex-direction: column;の適用
・display: block;を適用してflexを解除しようとした

コード
```<section id="Service">
                <h2 class="title">Service</h2>
                <ul class="Service-box">
                    <li class="service1">
                        <figure><img src="images/service-image-1.png"></figure>
                        <div class="Service-text">   
                            <h3 class="Service-heading">リリース時のサポートで<br>サービスのブランディングを</h3>
                            <p>弊社では、リリース時もサポートさせて頂きます。プレスリリース用のサイトや動画制作を通して、サービスのブランディングを行わせて頂きます。</p>
                        </div>
                    </li>
                    <li class="service2">    
                        <figure><img src="images/service-image.png"></figure>
                        <div class="Service-text">    
                            <h3 class="Service-heading">リリース後のサポートで<br>効果を最大化させる</h3>
                            <p>弊社では、リリース後もサポートさせて頂きます。サービスはリリース後に様々な課題にぶつかります。そこでクライアント様と一緒に改善を行うことで、デザインの効果を最大化させます。</p>
                        </div>
                    </li>
                </ul>
            </section>

コード

.Service-box li {
	display: flex;
}
.Service-box li:nth-child(even) {
	flex-direction: row-reverse;
}

.Service-heading{
    line-height: 2.2em;
    font-size: 1.5rem;
}

figure{
    width: 50%;
}
  
figure img {
    width: 100%;
}
  
.Service-text{
    width: 50%;
}

@media screen and (max-width:960px){
    .service1{
        flex-direction: column-reverse;
    }

    .service2{
        display: block;
    }

    .Service-text{
        width: 100%;
    }

    figure{
        width: 100%;
    }

}

Comments

[george]

出来れば、現状の画像が欲しいです。
力になれるかもしれません。

[george]

画像ありがとうございます。
あと、cssの上の方のコードも記述して頂けると助かります。
dispaly:flex;がどの要素にかかっているのかわからないためです。

[kk12]

確認不足で申し訳ありません。
追加しましたのでよろしくお願いいたします。

Answer 1

最初の方で下記の設定をしています。

.Service-box li {
	display: flex;
}

後ろのメディアクエリ内で、同じ要素に下記の設定をしています。

.service2{
    display: block;
}

前者の方が詳細度が高いので前者が有効になっています。

詳細度 - CSS: カスケーディングスタイルシート | MDN

後者のメディアクエリ内の設定の詳細度をあげればいいでしょう。
例えば、下記のように修正すれば縦並びになります。

.Service-box .service2 {
     display: block;
}

Answer 2

原因
cssの優先順位が原因のようですね。
詳しくは下記のurlの記事等を参考にしてみてください。
https://zero.css-happylife.com/basic/specificity.shtml
http://creator.aainc.co.jp/archives/4947

解決策
以下のコードどちらかをメディアクエリ内に追加してみてください。

.Service-box li:nth-child(even) {
    flex-direction: column;
}

or

.service2 {
    flex-direction: column !important;
}

Comments

[kk12]

追加してみたのですが、service2の部分のみcssが打ち消されてしまい適用できませんでした。

[george]

回答を編集してみました

[kk12]

遅い時間までありがとうございます。
無事にできました！