css - デバイス画面に特定のメニュー リストを表示する方法

Question

メニューリストが表示される応答性の高い電子メールナビゲーションメニューを作成しようとしていますが、デスクトップ画面には Shop e-conolight が含まれていませんが、モバイルデバイスでは Shop e-conolight と Sale のみが表示されます。

<li><a class="non-mobile" title="" href="#">LED Lightning</a></li>
<li ><a class="non-mobile" title="" href="#">Linear Fluorescent</a></li>
<li><a class="non-mobile" title="" href="#">Wall Packs</a></li>
<li><a class="non-mobile" title="" href="#">Floodlights</a></li>
<li><a class="non-mobile" title="" href="#">Exit &amp; Emergency</a></li>
<li ><a class="show-mobile" title="" href="#">Shop e-conolight</a></li>
<li class="active"><a title="" href="#" class="sale" style="color:#fff;">Sale</a></li>

@media only screen and (min-device-width:320px) and (min-device-width:480px) and (max-width: 600px) {
      .non-mobile { display: none; }
      .show-mobile{
            display:inline-block;
      } 
}
@media screen and (max-width: 3024px) {
      .show-mobile{ display: none; }
}