bootstrapのナビにおける重複コンテンツ

Question

お世話になります。

bootstrapでレスポンシブデザインにする際のナビについて質問です。
col-lg-XのようにPC等のディスプレイの大きな画面で表示させる際は、グローバルナビとは別の場所で配置させたいものを、col-xs-Xのようにスマホ画面で表示させる時は#gnaviの中に入れてしまいたいです。

こちらを実現しようとすると、同じコンテンツをPC用とスマホ用に２つ記述し、片方では非表示にするという方法しか思いつかなかったのですが、それだとコンテンツを重複して掲載してしまうので、よりよい方法を教えていただきたいです。

また、現状のソースコードは以下のとおりです。

<nav class="navbar navbar-default">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#gnavi">
      <span class="sr-only">メニュー</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
 
  <div class="visible-lg">
    <!--★PCではここに表示★-->
  </div>

  <div id="gnavi" class="collapse navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="">Link1</a></li>
      <li><a href="">Link2</a></li>
      <li><a href="">Link3</a></li>
      <li class="hidden-lg"><a href=""><!--★スマホではここに表示★--></a></li>
    </ul>
  </div>
</nav>

以上、よろしくお願いします。

Answer 1

動作サンプル

jQueryを使って、ユーザーエージェントを調べbodyタグにモバイル端末ならmobileなどクラスをつけます。
もしbodyが.mobileを持っている場合はモバイルの挿入ポイントに、それ以外はPCのポイントへ入れます。

挿入する何かが何かわからなかったので、適当にアイコン画像を入れました。
クローンしてポイントへ入れてるので元のは残ります。

UAから判別しているという点からjsFiddleでは表示ができなかったので、codepenに移植してfull表示で試すか、実機で動作を確認して下さい。

上手く動作しない古い端末とかがあるかも知れませんが概ね動作するかと思います。
bodyタグにmobileとクラスが入ればcssも少しは書きやすくなるかと思います。UAの判断が最良の方法かは謎ですが、これと画面幅を調べたりして、タブレットもイケるかと思います。
メディアクエリを組み合わせればより細かく制御できるでしょう。