Flex layout and trying to do flex-wrap below a certain breakpoint

I have a relatively simple layout where I have a module with some content. I'd like the progress bar and the text labeled "parts" and "projects" to go underneath the image and expand to the full width of the module when the window gets below 640px. What I have does not seem to work, Any ideas? Thanks. The title text should stay next to the image on all sizes.

<script src="https://cdn.tailwindcss.com"></script>

<div class="rounded-2xl flex bg-[#3B4E6A]">
  <div class="flex">
    <div class="h-20 w-20 md:w-[160px] md:h-[160px] mr-1 md:mr-1 md:ml-0.5 flex-shrink-0 m-1">
      <img src="https://placehold.co/120x120">
    </div>
  </div>
  <div class="w-10/12">
    <p class="mb-9 text-white font-semibold text-lg lg:text-2xl mt-1 ">some stuff here</p>
    <div class="w-full bg-white rounded-full h-1 text-white"> Bar </div>
    <div class="flex mt-2 align-bottom sm:align-baseline">
      <div class="text-white mt-[12px]"><span class="font-medium"></span> <span>Item 1</span></div>
      <div class="text-white ml-1 mt-[12px]"><span class="font-medium"></span> <span>Item 2</span>
      </div>
    </div>
  </div>
</div>
</div>

Solution

To make the progress bar and the text labeled "parts" and "projects" go underneath the image and expand to the full width of the module when the window width is below 640px, you can use responsive design techniques. You can achieve this by adjusting the layout using flexbox and media queries. Below is the modified code:

<div class="rounded-2xl flex flex-col md:flex-row bg-[#3B4E6A]">
    <div class="md:w-[100px] md:h-[100px] lg:w-[160px] lg:h-[160px] m-1 flex-shrink-0">
        <img src="https://placehold.co/400x400"> 
    </div>
    <div class="w-full md:w-10/12">
        <p class="mb-4 text-white font-semibold text-md lg:text-2xl mt-1 w-full xl:w-2/4"> Title stuff here</p>
        <!--this part should go below the image and expand to the full width of the module - the bar ,the and the parts and projects text-->
        <div class="flex flex-wrap">
            <div class="w-full bg-white progressBar dark:bg-gray-progressBar rounded-full h-[10px] sm:mb-3">
                <!-- Progress bar content here -->
            </div>
            <div class="flex w-full mt-3 text-white">
                <div class="w-1/2 md:w-auto flex items-center">
                    <span class="font-medium">1</span>
                    <span class="ml-1">Parts</span>
                </div>
                <div class="w-1/2 md:w-auto flex items-center">
                    <span class="font-medium">1</span>
                    <span class="ml-1">Projects</span>
                </div>
            </div>
        </div>
    </div>
</div>

Wrapped the content inside a flex container with flex-col for mobile layout and md:flex-row for larger screens.
Adjusted the width of the image container and the content container using classes based on screen size (md:w-[100px], md:w-10/12).
Used flex-wrap to allow the content to wrap onto the next line if needed.
Adjusted the layout of "parts" and "projects" text to take full width on smaller screens (w-full for mobile and w-1/2 for larger screens).
Added flex class to ensure proper alignment of "parts" and "projects" text.