テーブルの列をモバイルビューにスタックすることが私の目標です

Question

私には 5 つの列があり、それがコーディングするのに最も簡単な方法であるため、それらをテーブルにしています。

モバイルビューに重ねて表示してほしいです。どうすればいいでしょうか？

私の形式は次のとおりです:

リーリー リーリー

ご協力いただければ幸いです。メディアクエリを使用して、コンテンツクラスを100％の幅に設定してみました。できればスタッキングできるようにしてほしいです。どこで間違ったのか分かりません。

テーブルメソッドの前にフレックスボックスを使用しようとしましたが、画面サイズが変更されたときの高さの問題に遭遇しました。これは私にとっては簡単ですが、モバイルレスポンシブにする方法がわかりません。実際のテーブルではないので、少し混乱しています。

Answer 1

現在のデスクトップ設定が気に入っている場合、最も簡単な方法は、上記のすべての CSS を @media クエリでラップして、より大きな画面に対応することです。 Like @media (min-width: 768px) { ... すべての CSS } - このようにすると、モバイル デバイス上の何もこれらのスタイルの影響を受けなくなります。デフォルトでは、div はブロックレベルの要素であり、100% スタックされます。

リーリー リーリー