Edits after your comment update:
I have checked your code so things going wrong or what you can do.
- You have div as a direct child in your UL which is a bad approach, you should only use LI as a direct child of UL and then in LI you can use div or whatever you want.
a structure like this,
<ul class="nav sidebar-inner" id="sidebar-menu">
<li class="has-sub">
</li>
<li class="has-sub">
</li>
<li class="has-sub">
</li>
<li class="has-sub">
</li>
<li class="has-sub">
</li>
<li class="has-sub desktop">
</li>
<li class="has-sub mobile">
</li>
<li class="has-sub">
</li>
</ul>
LI with a class desktop which you want to show on desktop only and LI with class mobile is the part which you want to show on mobile only.
now just write the CSS for your requirement. make mobile's display none without any media point and block it on mobile and make desktop's display none on mobile only. like this...
.mobile {display: none;}
@media(max-width:767px){
.mobile {
display: block;
}
.desktop {
display: none;
}
}
NOTE: 767 is the point I have in the above code just for demo purpose, you can change it to whatever you need. apply the exact logic and make your HTML right, it will work for you.