カラムのレイアウトがレスポンシブでガラッと変わるのはどうやって制作しているのでしょうか？

Question

https://web-kanji.com/search/tokyo/chiyoda/human-resources/corporate-site/planning
上記のサイトでがPCサイズで見るとカラムが以下のように写ります。

スマホサイズにするとカラムが以下のようになります。

これって@media onlyでスマホサイズにすると、
PCサイズのカラムを消して、
スマホサイズ用のカラムを表示しているのですか？

Answer 1

HTMLは共通です。
pcサイズではdisplay: flex;で横並び(2カラム)にして、
スマホサイズでは、メディアクエリで display: block; で上書きして縦並びにしてますね。

初心者向け！Chromeの検証機能（デベロッパーツール）の使い方

Comments

[takawork]

ありがとうございます。HTMLが共通ということは、事業所などのタグはどこに行ってしまったのでしょうか？
あとメディアクエリでdisplay: block;を入れるだけで変わっているのでしょうか？それとも他の調整とかもしてますか？

[hatena19]

事業所などのタグは display: none; で非表示にしてますね。
2カラム、1カラムの切り替えは flex と block の切り替えですね。
あとは、各要素のfont-size とか width margin も調整してますね。

[takawork]

いまいちどこのクラスのものをdisplay: none; してるのか分かりませんでした。お手数ですが教えて頂けますでしょうか？

[takawork]

companies-item-headerのところで合っていますか？

[kyoya0819]

Windows : Ctrl + Shift + I

[hatena19]

調べたい部分を右クリック→検証で確認できます。

回答に参考リンクを追記しておきます。