tengo un mapa de google el cual tiene una lista reactiva a la izquierda, eso termina mostrándose con la lista encima del mapa en la vista móvil, quisiera saber cómo puedo hacer para que el div de la lista se muestre debajo del div del mapa en mobile
este es mi código de los divs del mapa y la lista
<style>
html, body {
height: 100%;
width: 100%;
}
#map {
position: center;
width: 100%;
height: 50em;
}
</style>
<div
class="lg:flex flex-row md:flex flex-row sm:px-6 lg:px-8 bg-white overflow-hidden shadow-xl sm:rounded-tl-md sm:rounded-tr-md p-3">
<div id="list" class="lg:basis-1/4 md:basis-1/4 sm:px-6 lg:px-8">
<livewire:franchise-list/>
</div>
<div class="lg:basis-9/12 md:basis-9/12 sm:px-6 lg:px-8">
<div id="map" class="max-w-7xl mx-auto sm:px-6 lg:px-8"></div>
</div>
</div>
esto ocasiona que en móvil la vista se vea con la lista encima del mapa, lo correcto sería al revés, mientras que en desktop la lista a la izquierda del mapa (actualmente está bien)
además, no hay ningún separador horizontal entre la lista y el mapa, no se ve estético