お世話になります。
先日掲題の件で質問させて頂き、PCページの表示が改善されたのですが、
スマホでメニューを開いた際に２列の表示となり画面が左右にブレてしまいます。

PCページのメニューでは複数列、スマホページのメニューでは１列に表示させることは
できないでしょうか。

下記に修正前と修正後のソースを貼り付けておきます。
よろしくお願い致します。


【修正前】
<ul class="l-main-navi-list">
<{section name=num loop=$category}>
<{if $smarty.section.num.first }>
<li class="l-main-navi-list__item">
<button class="l-main-navi-list__link js-toggle-btn">
BRAND
</button>
<div class="l-dropdown-menu js-toggle-contents">
<ul class="l-dropdown-menu-list">
<{/if}>
<li class="l-dropdown-menu-list__item">
<a class="l-dropdown-menu-list__link" href="<{$category[num].link_url}>"><{$category[num].name}></a>
</li>
<{if $smarty.section.num.last }>
</ul>
</div><!-- /.l-dropdown-menu -->
</li>


【修正後】
<ul class="l-main-navi-list">
<{section name=num loop=$category}>
<{if $smarty.section.num.first }>
<li class="l-main-navi-list__item">
<button class="l-main-navi-list__link js-toggle-btn">
BRAND
</button>
<div class="l-dropdown-menu js-toggle-contents" style="width:485px">
<ul class="l-dropdown-menu-list" style="display: flex;flex-wrap: wrap;">
<{/if}>
<li class="l-dropdown-menu-list__item" style="width: 200px;">
<a class="l-dropdown-menu-list__link" href="<{$category[num].link_url}>"><{$category[num].name}></a>
</li>
<{if $smarty.section.num.last }>
</ul>
</div><!-- /.l-dropdown-menu -->
</li>