レスポンシブデザインcolumn-reverseの使い方がわからない。

Question

【質問】レスポンシブデザインの練習をしています。flex-direction: column-reverse;を使って写真とテキストの位置を変えようと思ったのですが、うまくいきません。なぜでしょうか？

〖↑PCサイズの画面〗

〖↑これを　次の画像のようにしたい。〗

〖↑この形にしたい〗

〖↑しかしflex-direction: column-reverse;を使用した結果、2番の青枠だけ、このようになってしまった。〗
１番と3番の青枠は、テキストが上、画像が下になったのですが、真ん中の青枠だけこのようになってしまいます。

<div class="contents-wrapper">

      <div class="description-container">
        <div class="description-icon">
          <img src="123456789.jpg">
        </div>
        <div class="description description-right">
          <h2>出張先でも、アットホーム</h2>
          <p>出張のときも、新天地に異動のときも安心。他の出張者が5つ星評価をつけたお部屋やデザイナーズホテルを探しましょう。</p>
          <a href="#">仕事用スペースを完備した宿泊先を検索</a>
        </div>
      </div>

      <div class="description-container">
        <div class="description-icon">
          <img src="123456789.jpg">
        </div>
        <div class="description description-left">
          <h2>チームの心をひとつに</h2>
          <p>ラーメン作り教室やカヌーレッスンに参加。普段オフィスでは目にできない同僚たちの意外な面に触れ、深いレベルでつながれます。</p>
          <a href="#">Airbnbの「体験」を検索</a>
        </div>
      </div>

      <div class="description-container">
        <div class="description-icon">
          <img src="123456789.jpg">
        </div>
        <div class="description description-right">
          <h2>創造力をかきたてるスペース</h2>
          <p>煮詰まったら1日オフサイトで気分を変えてみませんか？ひらめきが湧く環境で、チームの生産性を高めましょう。</p>
          <a href="#">Wi-Fi完備の宿泊先を見る</a>
        </div>
      </div>
    </div>

.contents-wrapper{
  width: 100%;
  height: 1590px;
  margin-top: 60px;
}

.description-container{
  width: 100%;
  height: 500px;
  border: solid 1px blue;  /*青枠*/
  display: flex;
  justify-content: space-evenly;
}

.description-container:nth-child(even){
  flex-direction: row-reverse;
}

.description-icon{
  width: calc(42% - 30px);
  height: calc(100% - 20px);
  border: solid 3px yellow;
}

.description{
  width: calc(58% - 30px);
  height: calc(100% - 20px);
  padding-left:155px;
  padding-right:155px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* レスポンシブ用CSS */
  .contents-wrapper{
    height: 2500px;
  }
  .description-container{
    height: 700px;
    flex-direction: column-reverse;/*←ここがわからない*/
  }
  .description-icon{
    width: 95%;
    height: 50%;
    margin: 10px auto;
  }
  .description{
    width: 95%;
    height: 40%;
    margin: 10px auto;
  }

長くなってすみませんでした。以上よろしくお願いします。

Comments

[hatena19]

レスポンシブ用CSSはどのように読み込んでますか。
メインのCSSとは別ファイルでheadないでlinkタグで読み込んでいるのでしたら、その部分のコードを提示してください。
メインと同じファイルなら、メディアクエリの部分のコードも提示してください。

[OHASI]

ご丁寧な回答ありがとうございました。本当に助かりました。

Answer 1

詳細度が.description-containerより.description-container:nth-child(even) の方が高いのが原因だと思います。.description-containerの方の詳細度を上げればいいでしょう。

例えば、

  .contents-wrapper .description-container {
    height: 700px;
    flex-direction: column-reverse;
  }

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