Necesito ayuda con este dropddown ya que me funciona normal con las propiedades responsive definidas para los pcs con px superiores a 1400. Pero con los menores, el dropdown en lugar de desplegar la lista hacia abajo lo hace hacia la derecha. Aquí les dejo el código:
<li class="nav-item dropdown text-center">
<div class="btn-group flex-column">
<div class="d-flex">
<a type="button" class="btn text-light btn-sm my-auto"
href="#categorias">Categorías</a>
<button type="button" class="btn text-light dropdown-toggle dropdown-toggle-split"
data-bs-toggle="dropdown" aria-expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu flex-column" id="categoriasDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</li>
Por favor, necesito ayuda. Se los agradecería mucho.
--- EDITADO ---
Ahora quedó así:
<li class="nav-item dropdown text-center">
<div class="btn-group">
<div class="d-flex">
<a type="button" class="btn text-light btn-sm"
href="#categorias">Categorías</a>
<div class="flex-column">
<button type="button" class="btn text-light dropdown-toggle
dropdown-toggle-split" data-bs-toggle="dropdown" aria-
expanded="false">
<span class="visually-hidden">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu flex-column">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a>
</li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
</div>
</div>
</li>
<>
). De hacerlo, no olvides agregar el CSS y el JS de Bootstrap, haciendo clic en Agregar librería externa, situado a la izquierda de la pantalla.