HTML,CSS テーブルデザイン

前提

webコーディングでのテーブルデザインについての質問です。
レスポンシブデザインでテーブルレイアウトの変更を行いたいのですが、いまいちうまくいきません。。

試したこと

th,tdにdisplay:blockを設定
[見出し３、４] にそれぞれクラスを付与
[見出し3] ⇨にdisplay:noneにしておいた [見出し４]のタイトルを蘇らせる
[見出し4] ⇨非表示
内容3,4に対してどのような処理をすれば良いのかが分かりません。

現在
[見出し3&4]
内容3
内容4
内容3-1
内容4-1

となってしまっております。
ものすごく初歩的な質問になり、申し訳ございません。
レイアウト例等Google先生に聞きましたが、思うようなリファレンスが得られませんでした。。。
お力をお貸しいただけると幸いです。