I’m using Next JS for this project. I’m trying to make a card with information, and I want to have a plain card (with no grid or rows) in small devices like the examples of bootstrap (Image on top and text in the bottom), but in bigger devices, I want it to be in rows. I use the rows function to align the image in the left and the text on the right (So the first column, the image, is at the left, and the second one, the text, at the right). Here is my code:

<div className="container pt-3">
          <div className="card">
            <div className="row row-cols-2">
              <div className="col-sm-6 my-auto d-flex">
                <Image
                  src="/main.webp"
                  className='card-img img-fluid rounded p-2'
                  width={400}
                  height={400}
                  alt="eco"
                />
              </div>
              <div className="col-sm-6 my-auto d-block">
                <div className="card-body-right my-auto d-block p-2">
                  <h1 className="card-title">Content</h1>
                  <h4 className="card-text">2000</h4>
                  <ul>
                    <li><h5>Content</h5></li>
                    <li><h5>Content</h5></li>
                    <li><h5>Content</h5></li>
                    <li><h5>Content</h5></li>
                    <li><h5>Content</h5></li>
                  </ul>
                  <p><a href="#" className='text-decoration-none'>Más características</a></p>
                  <a href="#" className="btn btn-primary px-5">Ver</a>
                </div>
              </div>
            </div>
          </div>
        </div>

I tried blocking some classes, but nothing worked.

>Solution :

Just use the grid as intended, with full-width columns for smaller screens and half-width columns on larger screens.

I’ve used the medium breakpoint here for demonstration purposes. See also the full page demo.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div class="container pt-3">
  <div class="card">
    <div class="row row-cols-2">
      <div class="col-12 col-md-6 my-auto d-flex">
        <img src="https://via.placeholder.com/600x200" class='card-img img-fluid rounded p-2' width={400} height={400} alt="eco" />
      </div>

      <div class="col-12 col-md-6 my-auto d-block">
        <div class="card-body-right my-auto p-2">
          <h1 class="card-title">Content</h1>
          <h2 class="card-text">2000</h4>

          <ul>
            <li>
              <h5>Content</h5>
            </li>
            <li>
              <h5>Content</h5>
            </li>
            <li>
              <h5>Content</h5>
            </li>
            <li>
              <h5>Content</h5>
            </li>
            <li>
              <h5>Content</h5>
            </li>
          </ul>

          <p><a href="#" class='text-decoration-none'>Más características</a></p>

          <a href="#" class="btn btn-primary px-5">Ver</a>
        </div>
      </div>
    </div>
  </div>
</div>