Адаптивные ряды и строки в CSS

На большом экране у меня должно 6 элеметов в ряд, а на мобильных экранах по одному элементу, но выводится по другому. Как мне исправить данный код?

<ul class="dropdown">
    <div class="container row" align="center">
<div class="col-lg-2" align="center">
<li class="dropdown-top">
    <img style="width:100px" src="../aptis.png?2"/><br>
</li>
</div>
<div class="col-lg-2" align="center">
<li class="dropdown-top">
  <img style="width:100px" src="../bio.png?2"/>
</li>
</div>
<div class="col-lg-2" align="center">
<li class="dropdown-top">
    <img style="width:100px" src="../think.png?2"/><br>
</li>
</div>
<div class="col-lg-2" align="center">
<li class="dropdown-top">
    <img style="width:100px" src="../math.png?2"/><br>
</li>
</div>
<div class="col-lg-2" align="center">
<li class="dropdown-top">
    <img style="width:100px" src="../phys.png?2"/><br>
</li>
</div>
<div class="col-lg-2" align="center">
<li class="dropdown-top">
    <img style="width:100px" src="../chem.png?2"/><br>
</li>
</div>
</div>
</ul>