例えば、ひとつのヘッダー内に、HTMLを個別に用意してCSSで個別に装飾をして

<div class="smart-phone">（スマホサイズの時に表示したい領域）
<div class="PC">（PC画面サイズで表示したい領域）
@media (min-width:760px)は、{ class="smart-phone”をdisplay:noneに。
一方で@media (max-width:759px)は、{ class="PC”をdisplay:noneに。

サイズに合わせて片方を表示、非表示という風にやっても良いのでしょうか？
もちろん複雑なデザインでない時は、普通にモバイルファーストのやり方で作り、
モバイルサイズとPCサイズで全く違った複雑なデザインの時は個別に作っておいて
この様なやり方で実行しても大丈夫でしょうか？