How can I change from rows to card in bootstrap 5.3?-CodePudding

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.

CodePudding user response：

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/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">

<div >
  <div >
    <div >
      <div >
        <img src="https://via.placeholder.com/600x200" class='card-img img-fluid rounded p-2' width={400} height={400} alt="eco" />
      </div>

      <div >
        <div >
          <h1 >Content</h1>
          <h2 >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="#" >Ver</a>
        </div>
      </div>
    </div>
  </div>
</div>