Multilevel dropdown

basic.html

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
    <span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="main_nav">

<ul class="navbar-nav">
<li class="nav-item"> <a class="nav-link" href="#"> First level 1 </a> </li>
<li class="nav-item"> <a class="nav-link" href="#"> First level 2 </a></li>
<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">  First level 3  </a>
    <ul class="dropdown-menu">
	  <li><a class="dropdown-item" href="#"> Second level 1 </a></li>
	  <li><a class="dropdown-item" href="#"> Second level 2 &raquo </a>
		 <ul class="submenu dropdown-menu">
		    <li><a class="dropdown-item" href=""> Third level 1</a></li>
		    <li><a class="dropdown-item" href=""> Third level 2</a></li>
		    <li><a class="dropdown-item" href=""> Third level 3 &raquo </a>
			<ul class="submenu dropdown-menu">
			    <li><a class="dropdown-item" href=""> Fourth level 1</a></li>
			    <li><a class="dropdown-item" href=""> Fourth level 2</a></li>
			</ul>
		    </li>
		    <li><a class="dropdown-item" href=""> Second level  4</a></li>
		    <li><a class="dropdown-item" href=""> Second level  5</a></li>
		 </ul>
	  </li>
	  <li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
	  <li><a class="dropdown-item" href="#"> Dropdown item 4 </a>
    </ul>
</li>
<li class="nav-item"> <a class="nav-link" href="#"> First level 1 </a> </li>
<li class="nav-item"> <a class="nav-link" href="#"> First level 2 </a></li>
</ul>

</div> <!-- navbar-collapse.// -->
</nav>

script.js

// Prevent closing from click inside dropdown
$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});

// make it as accordion for smaller screens
if ($(window).width() < 992) {
  $('.dropdown-menu a').click(function(e){
    e.preventDefault();
      if($(this).next('.submenu').length){
        $(this).next('.submenu').toggle();
      }
      $('.dropdown').on('hide.bs.dropdown', function () {
     $(this).find('.submenu').hide();
  })
  });
}

style.css

@media (min-width: 992px){
	.dropdown-menu .dropdown-toggle:after{
		border-top: .3em solid transparent;
	    border-right: 0;
	    border-bottom: .3em solid transparent;
	    border-left: .3em solid;
	}
	.dropdown-menu .dropdown-menu{
		margin-left:0; margin-right: 0;
	}
	.dropdown-menu li{
		position: relative;
	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{
		display: block;
	}
}

Hello, your example works as expected on desktop devices, but is there any workaround for this to work on mobile devices?
Thank you!