cardレイアウト（画像の位置）を画面サイズよって変更させたい

Question

以下のサイトの下部、「ホスティングの詳細はこちら」の下にある、カードレイアウトを実現したいです。
「Airbnbのホームページ」
https://www.airbnb.jp/host/homes

画面サイズがスマートフォンサイズの場合、
画像が左、テキストが右側のカードレイアウトで表示されますが、
画面サイズが大きくすると、
画像が上にいきテキストが下にある状態のカードレイアウトになります。

上記の実現方法がわかりません。教えてもらえないでしょうか？

web系プログラミング勉強のために、上記サイトの模写をしているところです。

以下は、該当箇所を自分なりに記述してみました。bootstrapを利用しています。
この場合、画面をスマフォサイズに変更しても、画像が上、テキストが下の
状態はかわりません。

<div class="row"> <div class="card-group"> <div class="card"> <img src="../img/cat.jpg" class="card-img-left" alt="..."> <div class="card-body"> <h5 class="card-title">初期設定</h5> <p class="card-text">ホスティング入門ガイド</p> </div> </div> <div class="card"> <img src="../img/cat.jpg" class="card-img-left" alt="..."> <div class="card-body"> <h5 class="card-title">安全</h5> <p class="card-text">ホストを守るAirbnbのしくみ</p> </div> </div> <div class="card"> <img src="../img/cat.jpg" class="card-img-left" alt="..."> <div class="card-body"> <h5 class="card-title">マネープラン</h5> <p class="card-text">Airbnbで収益を得るには</p> </div> </div>

Comments

[hatena19]

現状のHTMLコードとCSSコードを提示してください。

このままでは、丸投げの製作依頼になりますので、推奨されない質問になります。

Answer 1

bootstrapを利用しているというのを見落としていて、コーディングしてしまったのでbootstrapは無視してます。
模写先となるべく同じレイアウトになるようにしました。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.row {
  margin: 0 auto;
  padding: 0 24px;
}

.card {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  border: 1px solid hsl(0deg 0% 0% / 10%);
  border-radius: 3px !important;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.06);
}
.card-img-left {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.card-body {
  margin: 0 10px;
}

@media screen and (min-width:744px) {
  .row {
    max-width: 696px;
  }
  .card-group {
    display: flex;
    justify-content: space-between;
  }
  .card {
    display: block;
    width: calc(33.3% - 10px)
  }
  .card-img-left {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}
@media (min-width: 1128px) {
  .row {
    max-width: 1080px;
  }
}