画面がスマートフォンサイズになったとき、一定の箇所だけ改行したい

Question

みなさん、初めまして。

現在、WEBサイトのお問い合わせフォームを作成しています。
tableタグで作成しているのですが、画面がスマートフォンサイズになったときに、thタグの箇所だけ改行したいです。

コード

<th><span class="required-contactform7 bg-danger p-2 mr-2 text-light">必須</span>メールアドレス</th> <th><span class="required-contactform7 bg-danger p-2 mr-2 text-light">必須</span>内容</th> <th><span class="bg-danger p-2 mr-2 text-light">必須</span><span class="title-contactform7"></span>メッセージ</th>

上記のコード例だと

必須
メールアドレス

必須
内容

必須
メッセージ

のようにしたいです。
ご教授いただけると幸いです。よろしくお願いいたします。

Comments

[m.ts10806]

コードはマークダウンのcode機能を利用してください。
またこの内容だけだとRuby,RoRとの関連性があまり見られません。
外して利用しているフレームワーク（Bootsrapでしょうか）のタグを入れられたほうが良いです。

Answer 1

ご要望の用途であればテーブルタグでの書式設定をやめるべきです

Comments

[suguru0717]

みなさま、ご回答いただきまことにありがとうございます。
ご教授いただいた内容を参考にさせていただきました。

今後とも、是非宜しくお願い申し上げます。

Answer 2

ご希望の仕様でしたら下記のコードで対応できるかと思います。
XXXの部分はご希望のpx数を入力してください。

@media screen and (max-width: XXXpx) {
  .required-contactform7 {
    display:block;
    width:100%;
  }
}

※「.required-contactform7」Class(必須項目)にのみ設定されている状態です。Contact Form 7の「任意」のクラス名が異なる可能性があります。状況に応じて　.required-contactform7,.XXXX-contactform7のように設定してください。

Answer 3

thの中身をdiv等で囲ってしまって、
PC幅の時は.testにflexをかけ、スマホ幅の時はflexをやめる　という形でどうでしょうか？

↓以下で実装してみました。
https://codepen.io/xyuno0717/pen/bOeqaR