Я хочу использовать Bootstrap collapse, но я хочу, чтобы мои разделы содержались под содержимым каждой ссылки, главным образом потому, что именно так мне и нужно работать на мобильных устройствах (меню представляет собой столбец, и содержимое открывается под каждой ссылкой).).К сожалению, на сайте у меня есть ссылки в ряд, и контент открывается не под строкой меню ссылок, а рядом с каждой ссылкой.Я не хочу, чтобы это случилось.Есть ли способ сохранить мою разметку таким образом, но сделать свернутый контент открытым под строкой ссылок?
<div class="accordion main-navigation" id="accordion">
<div class="main-menu-container">
<nav class="main-menu navbar-collapse" id="hamburgerMenu">
<ul class="main-nav p-0 m-0 d-flex flex-column flex-md-row justify-content-md-center align-items-md-center">
<li class="nav-item d-flex justify-content-start">
<a class="mypage collapsed extend" data-toggle="collapse" href="#myPages" role="button" aria-expanded="true" aria-controls="myPages">Mina sidor</a>
</li>
<div class="collapse mypage extended-navigation" id="mypage" data-parent="#accordion">
<ul class="clearfix steg_down">
<li class="drop-down">
<div class="mega-menu row m-auto p-1 pb-3 pl-3 pr-3">
<div class="col d-xs-none d-lg-block p-0">
<a href="#"><img src="..." alt="Placeholder Img"></a>
</div>
<div class="col">
<h3>Kontakta oss</h3>
<ul class="sub-menu">
<li class="list-item"><a href="#" target="_blank">Kontakta oss via telefon eller mail</a></li>
</ul>
<h3>Hjälp</h3>
<ul class="sub-menu">
<li class="list-item"><a href="#" target="_blank">FAQ</a></li>
<li class="list-item"><a href="#">Ordlista</a></li>
<li class="list-item"><a href="#" target="_blank">Missnöje</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
<li class="nav-item d-flex justify-content-start">
<a class="kundservice collapsed extend" data-toggle="collapse" href="#kundservice" role="button" aria-expanded="true" aria-controls="myPages">Kundservice</a>
</li>
<div class="collapse mypage extended-navigation" id="kundservice" data-parent="#accordion">
<ul class="clearfix steg_down">
<li class="drop-down">
<div class="mega-menu row m-auto p-1 pb-3 pl-3 pr-3">
<div class="col d-xs-none d-lg-block p-0">
<a href="#"><img src="..." alt="Placeholder Img"></a>
</div>
<div class="col">
<h3>Kontakta oss</h3>
<ul class="sub-menu">
<li class="list-item"><a href="#" target="_blank">Kontakta oss via telefon eller mail</a></li>
</ul>
<h3>Hjälp</h3>
<ul class="sub-menu">
<li class="list-item"><a href="#" target="_blank">FAQ</a></li>
<li class="list-item"><a href="#">Ordlista</a></li>
<li class="list-item"><a href="#" target="_blank">Missnöje</a></li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</ul>
</nav>
</div>
</div>