Responsive icon menu submenu - html

Question

I want to design icon menu & click to expand submenu using HTML CSS.
I want to design this
I want show the sub menu next row of the responsive div as shows above image. but the problem is the sub menu appear next line but rest of the parent menu goes under it see the problem from the bellow image
this is the problem
I used bootstrap4 and following html
<div class="icon-bar" id="myGroup">
<a class="btn btn-primary" href="index.html" data-toggle="collapse" role="button" aria-expanded="false">
<i class="menu-icon mdi mdi-television fa-4x"></i>
<br>
<span class="menu-title">Dashboard</span>
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#Authentication" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="menu-icon fa fa-handshake-o fa-4x"></i>
<br>
<span class="menu-title">Authentication</span>
</a>
<div class="collapse" id="Authentication" data-parent="#myGroup">
<div class="card card-body">
<a class="btn btn-primary btnsubmenu" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="fa fa-angle-right fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Groups</span>
</a>
<a class="btn btn-primary btnsubmenu" data-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1">
<i class="fa fa-angle-right fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Users</span>
</a>
</div>
</div>
<a class="btn btn-primary" href="pages/entity-profile-list.html" role="button" data-toggle="collapse" aria-expanded="false" >
<i class="menu-icon mdi mdi-television fa-4x"></i>
<span class="menu-title">Entity Profile</span>
</a>
<a class="btn btn-primary" data-toggle="collapse" href="#objectProfile" role="button" aria-expanded="false" aria-controls="objectProfile">
<i class="menu-icon fa fa-object-group fa-4x" aria-hidden="true"></i>
<br>
<span class="menu-title">Object Profiles</span>
</a> .......
Can anyone please help me? JSFiddle

Answer 1

this is actually quick and dirty and will not work 100%, but it could give you hint into the right direction. The intention here is to move the anchor elements, or better move the "opening menu" to the right position.
function test(element){
var element = $(element),
elemWidth = element.outerWidth(),
rightSpace = ($('#myGroup').width() - (element.offset().left + element .outerWidth())),
idx = parseFloat(rightSpace / elemWidth).toFixed(0),
moveelem = $(element).nextAll().slice(1,idx);
var objectProfile = $('#objectProfile');
element.after(moveelem);
objectProfile.after()
}
$('#myGroup > .btn.btn-primary').on('click', function(el){
test($(this));
})
here is your enhanced fiddle