Tailwind: Issues with flex, flex-col and lg:flex-row

I am trying to make a flexbox that shows four logos, and aligns them in the middle of the website.

I tried this code:

<div class="text-lg text-ODS-600 bg-ODS-100 rounded-lg p-2 text-center font-bold">
    <p>Thanks to:</p>
    
    <div class="flex justify-center">
        <div class="flex flex-col lg:flex-row justify-center items-center ">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
        </div>
    </div>
</div>

no matter what I try, the four logos are always vertically stacked, even on large screens. When I change the code into this, the logos are horizontally stacked:

<div class="text-lg text-ODS-600 bg-ODS-100 rounded-lg p-2 text-center font-bold">
    <p>Thanks to:</p>
    
    <div class="flex justify-center">
        <div class="flex flex-row justify-center items-center ">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="images/logo.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
        </div>
    </div>
</div>

What gives? My other parts of the website are nice and reactive (I use the lg: tag regularly, and that works nicely). So, any suggestions why this is not working as it should?

Solution

First: notice the height. Try giving a background color to the flex div so you see the space it occupies.

Second: don't use justify-center in your third div, as it may overflow the content vertically (change this in the code below, where it says justify-start and use chrome devtools to see how it renders on a vertical screen).

Here is the code I came up with, let me know if this is what you had in mind. Also, I am using the CDN version of tailwind. If it looks weird, try checking your installation.

<div class="text-lg text-ODS-600 bg-ODS-100 rounded-lg p-2 text-center font-bold h-screen">
    <p>Thanks to:</p>

    <div class="flex flex-row justify-center h-full">
        <div class="flex flex-col lg:flex-row justify-start items-center">
            <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/972ff624287465.5633233a7a2ff.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/1dfafe24287465.563322f6c7f69.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/57680524287465.5633233a4c04e.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
            <img src="https://mir-s3-cdn-cf.behance.net/project_modules/disp/2bd39124287465.5633231f3807a.png" alt="Installation App" class="mb-2 lg:mb-0 lg:mr-2">
        </div>
    </div>
</div>

the images I used: https://www.behance.net/gallery/24287465/Logos?tracking_source=search_projects|fictional+logos&l=4