我在这个项目中使用了Next JS。我想做一张有信息的卡片，我想要一张普通的卡片（没有网格或行）在小型设备中，如bootstrap示例（图像在上，文本在下），但是在更大的设备中，我希望它是按行排列的，我使用rows函数将图像左对齐，文本右对齐（所以第一列，图片，在左边，第二列，文本，在右边）。下面是我的代码：

<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>

我试过屏蔽一些课程，但是没有用。