IISでbootstrapのスマホ用コンテンツ出し分け

Question

IISでbootstrapのスマホ用コンテンツ出し分け方法について
通常は
hidden-xsやvisivle-xsなどで表示非表示でコンテンツの出し分けすると思うのですが、

<div class="hidden-xs">
コンテンツ
</div
<div class="visible-xs">
コンテンツ
</div>

どうしても上記の様な描き方になった場合
例えば

<div class="hidden-xs">//PCの時だけこのソース
<div class="visible-xs">//スマホの時はこのソース
コンテンツ
</div>

みたいに簡素化出来ないですかね

何か良い方法あれば教えてください

ファイルは.htmlの場合です。
jsでメディアクエリごとでクラスを動的に変えるなどしかないですか？

Comments

[gin]

下の2つの違いは何でしょう？？どちらか変更し忘れですか？

[hyksm]

コンテンツを二度描くか、一度描くかの違いです。

[gin]

下の2つはまったく同じに見えますが、同じものを2つ書くんですか？

[hyksm]

あっ、下の二つは重複してました。^^;すみません。同じです

[hyksm]

削除しました。

Answer 1

まず用途が不明なのですが、下のコードは結局PCでもSPでも同じコンテンツが出る想定なんですよね？
意味をなしていないので、コンテンツはhidden-xsなどを使用せず通常どおりメディアクエリにて作成すればよいかと思います。

いわゆるhidden-xsやvisible-xsはデバイスに応じてdisplay: none/block;をやってるだけです。