レスポンシブ対応について

Question

実現したいこと

スマホサイズにしたときに表に一部の要素だけflexを解除したい

イメージ説明　このようなデザインに仕上げたいです

発生している問題・分からないこと

レスポンシブ対応の際に一部分だけflexを解除する方法を学びたいです。

該当のソースコード

<div class="info-table">
                    <div class="info-boxes"></div><!-- /.info-boxes -->
                        <div class="item">
                            <span class="item-time">2023.04.01</span>
                            <span class="item-ttl">休診情報</span>
                            <span class="item-txt">2023年4月の休診日は5日、17日、27日となります。</span>
                        </div>
                        <div class="item">
                            <span class="item-time item-time-2 item-top">2022.12.24</span>
                            <span class="item-ttl item-ttl-2 item-top">イベント</span>
                            <span class="item-txt item-txt-2">当院でクリスマスイベントを行います。南高校吹奏楽団をお呼びして、ロビーコンサートを開催予定です。</span>
                        </div>
                        <div class="item">
                            <span class="item-time">2022.12.11</span>
                            <span class="item-ttl item-ttl-3">採用</span>
                            <span class="item-txt item-txt-3">当院では臨床検査技師を募集しております。詳しい福利厚生についてご説明させていただきます。当院で働く…</span>
                        </div>
                        <div class="item">
                            <span class="item-time item-time-4">2022.12.11</span>
                            <span class="item-ttl item-ttl-4">イベント</span>
                            <span class="item-txt">ホームページをリニューアルしました。</span>
                        </div>

.info-table {
    max-width: 1180px;
    height: 390px;
    background-color: #fff;
    border-radius: 30px;
    margin: 0 1px 113px 1px;
    padding: 48px 66px 46px 66px;
    display: block;
}
@media screen and (max-width: 1020px) {
    .info-table {
        width: 100%;
        height: auto;
    }
    .item-ttl {
        font-size: 80%;
        height: auto;
    }
}
@media screen and (max-width: 521px) {
    .item-txt {
        display: block;
    }
}
.item {
    display: flex;
    margin: 18px 0;
    border-bottom: 2px solid #E7E7E7;
    width: 100%;
    padding-bottom: 18px;
}
.item-time {
    flex: 0 0 min-content;
}
.item-ttl {
    flex: 0 0 80px;
}

.item:first-child {
    margin-top: 0;
}
.item:last-child {
    margin-bottom: 0;
}
.item-time .item-time-4 {
    margin-right: 30px;
    color: #21A937;
    font-size: 16px;
    font-weight: bold;
}

.item-ttl {
    margin-right: 30px;
    background-color: #444444;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    width: 80px;
    height: 25px;
    padding: 4px 16px;
    display: block;
    flex: none;
}

.item-txt {
    font-size: 16px;
    font-weight: bold;
}
.item:last-child {
    margin-bottom: 21px;
}
.item:first-child {
    margin-top: 0;
}
.item-time {
    font-size: 16px;
    font-weight: bold;
    color: #21A937;
    margin-right: 2.54%;
}
.item-ttl {
    width: 80px;
    height: 25px;
    background-color: #444444;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    padding: 4px 16px;
    margin-right: 30px;
    display: inline;
}
.item-txt {
    font-size: 16px;
    font-weight: bold;
    color: #444444;
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

flexを外したい要素に対してメディアクエリでdisplay:block;を入することによりできるとのことでしたができませんでした。

補足

特になし

Comments

[juner]

.item に display:flex がかかっている状態まではわかりますが、それに display: block を入れている様には見えないのですが、どれにどう適用したいと……？
あと、メディアクエリは 詳細度を上げないので セレクタ .item-ttl にかけてるつもりの メディアクエリは その同じ通常宣言よりも後に書くべきでは……？ (.item-txt はそもそも flex じゃないのでは……？
とりあえず playground はこんな感じでしょうか https://livecodes.io/?x=id/dfcneb4vr9a

参考： https://developer.mozilla.org/ja/docs/Web/CSS/Specifici：

Answer 1

下記でどうでしょう。

@media screen and (max-width: 521px) {
  .item-txt {
    display: block;
  }
/* 以下追加 */
  .item {
    flex-wrap: wrap;
    row-gap: 20px;
  }
}