TailwindCss - Row becomes a column on mobile

i would like to get some help with tailwindcss. I have a layout where the column on desktop becomes a row on mobile. This is the result on desktop

My code

 <div className='p-8'>
         <div className="grid grid-cols-4 font-bold">
             <p></p>
             <p>Price</p>
             <p>Size</p>
             <p>Color</p>
         </div>
         <div className="grid grid-cols-4">
             <p className="font-bold">Name</p>
             <p>Text</p>
             <p>Text</p>
             <p>Text</p>
         </div>
         <div className="grid grid-cols-4">
             <p className="font-bold">Brand</p>
             <p>Text</p>
             <p>Text</p>
             <p>Text</p>
         </div>
     </div>

Everything looks fine so far.

On mobile the layout should look like this

As you can see the row with Price Size and Color becomes a column. Does anyone could help me to understand how to solve this problem with tailwindcss.

Thank you very much

Have a good day

Here is a basic example that sets the grid to place items by column when lower than the default sm (640px) breakpoint of Tailwind.

More about responsive setting in Tailwind

Hope it gets close to the desired result.

The example runs in the snippets below for convenience. To see it adjust to screen sizes, use the full page option.

const App = () => {
  return (
    <div className="p-8 grid grid-flow-col sm:grid-flow-row">
    <div className="grid grid-row-4 auto-rows-fr sm:grid-cols-4 font-bold">
      <p></p>
      <p>Price</p>
      <p>Size</p>
      <p>Color</p>
    </div>
    <div className="grid grid-row-4 sm:grid-cols-4">
      <p className="font-bold">Name</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
    </div>
    <div className="grid grid-row-4 sm:grid-cols-4">
      <p className="font-bold">Brand</p>
      <p>Text</p>
      <p>Text</p>
      <p>Text</p>
    </div>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>
<script src="https://cdn.tailwindcss.com"></script>