Combining Multiple Bootstrap Menus Into One For Mobile?

I've been looking at this previously asked question: Consolidate Multiple Bootstrap 3 navbar menus on collapse And it provides a good solution to this issue as you can see in this

Solution 1:

So I found the answer and you can see by this fiddle.

Basically I took this answer (funny it's by the same person who answered the question I linked above) and just used prepend instead of append.

The js used:

$('#bs-example-navbar-collapse-1').on('show.bs.collapse', function () {
  $('#bs-example-navbar-collapse-1').prepend($('#sidebar').html());
});
$('#bs-example-navbar-collapse-1').on('hidden.bs.collapse', function () {
  $('#bs-example-navbar-collapse-1 .top-nav').remove();
});
$(window).on('resize', function () {
  if (window.innerWidth > 768) {$('#bs-example-navbar-collapse-1').collapse('hide');}
});

He's taking the HTML from the first list #sidebar and appending (prepending here) it to the second list. Then he removes it again once the collapse is no longer the class on the page. You can see the imperfect solution on the fiddle.

Solution 2:

Hide menu 2 for mobile. Show all items of menu 2 inside menu 1. These additional menu items should be available only on mobile.