Tailwind css flex responsive

I have a problem using Flex in Tailwind CSS. When I use the flex class with flex-row, I want to make it responsive by using md:flex-col, lg:flex-col, and sm:flex-col. However, only one class is taking effect imidiately instead of the base flex-row class or then instead of reduce window.

For example, when I reduce the window size using the inspector, md:flex-col does not work as expected. Can you help me fix this issue?

This is my code

import React from "react";

const Resume = () => {
  return (
    <div className="flex flex-row flex-wrap gap-4 p-4 bg-gray-200 md:flex-col h-screen w-screen">
      <div className="p-4 bg-blue-500 text-white">Item 1</div>
      <div className="p-4 bg-green-500 text-white">Item 2</div>
      <div className="p-4 bg-red-500 text-white">Item 3</div>
    </div>
  );
};

export default Resume;

I want responsive when I reduce window then md:flex-col work not immediately effect on the screen.