reactjs - tailwind css responsive grid issue

Question

I got issue when trying to add a "screen" prefix to grid-column, the layout is perfect but when I add md: to grid-col-span-6 everything is messed up.

this is the code :

import React from "react";
import app from "../images/app.png";

    const Featured = () => {
    return (
    <div className="mt-52 ">
      <h1 className="text-primary-dark-theme text-5xl mt-14">Projects</h1>

      <div className="grid grid-cols-12 grid-rows-1 mt-20 ">
        <div className="row-start-1 row-span-1 col-start-1 md:col-span-6">
          <img src={app} alt="" className="w-full" />
        </div>

        <div className="row-start-1 row-span-1 col-start-6  col-span-7">
          <div className="h-full w-full">
            <h1 className="text-right text-primary-dark-theme">
              Featured Project
            </h1>
            <h1 className="text-right text-gray-300 font-bold ">Title</h1>

            <p className="p-5 bg-gray-800 text-gray-400 shadow-lg rounded-md mt-5">
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio id
              doloribus sequi repellendus aperiam dolore!
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Featured;

This is how the ui looks in md

this is the result i want to have

this what happened when i add md predix to col-span-6

Answer 1

The issue seems to be that when applying the responsive md:col-span-6 it also overrides col-start-1 (you can see the styles no longer applied in the dev tools). Adding md:col-start-1 seems to fix this behaviour.

However, simply changing your image's wrapper <div /> to:

<div class="row-start-1 row-span-1 col-start-1 col-span-12">

Seems to have the desired result.