I'm having a problem with a website of mine with trying to make it responsive using flexbox and tailwind with flex-row sm:flex-col and it's not outputting in rows only weird columns. Keep in mind I am using Swiper for a slideshow.
Here is my code so far
<div class="flex-row sm:flex-column md:flex-column lg:flex-row xl:flex-row justify-center h-full"><div class="background-space sm:w-full md:w-full lg:w-3/4 xl:w-3/4 "><br><div class="swiper-container mr-0 ml-0 sm:w-full md:w-1/2 lg:w-2/5 xl:2/4"><div class="swiper-wrapper"><img class="swiper-slide" src="/images/1.jpg" alt=""><img class="swiper-slide" src="/images/2.jpg" alt=""><img class="swiper-slide" src="/images/3.jpg" alt=""></div><!-- Add Pagination --><div class="swiper-pagination"></div><!-- Add Arrows --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div><div class="sm:w-full md:w-full lg:w-1/4 xl:w-1/4 bg-white rounded mx-10 my-20 px-10 py-5 mx-0 the-form"><form method="#" action="#"><label for="1">1</label><input type="checkbox" name="1" id="1"><br><label for="2">2</label><input type="checkbox" name="2" id="2"><br><label for="3">3</label><input type="checkbox" name="3" id="3"><br><label for="4">4</label><input type="checkbox" name="4" id="4"><br><label for="5">5</label><input type="checkbox" name="5" id="5"><br><label for="6">6</label><input type="checkbox" name="6" id="6"><br><label for="7">7</label><input type="checkbox" name="Blokk" id="7"></form></div></div></div>