我在創(chuàng)造一個(gè)& quot堆疊的& quot圖像分量，在任一時(shí)刻4個(gè)圖像是可見的(。演示卡)。

期望的行為:

默認(rèn)(移動(dòng)):卡片應(yīng)該是單列布局(如當(dāng)前) md(平板電腦):卡片應(yīng)分兩排展示，每排兩張 lg(桌面):卡片應(yīng)排成一排，每排4張 在這種情況下，我很難理解標(biāo)記應(yīng)該如何排列，例如，對(duì)于平板電腦，我會(huì)使用如下方式:

<div class="row">
  <div class="col-md-6">
    <div class="demo-card"></div>
  </div>
  <div class="col-md-6">
    <div class="demo-card"></div>
  </div>
</div>
<div class="row">
  <div class="col-md-6">
    <div class="demo-card"></div>
  </div>
  <div class="col-md-6">
    <div class="demo-card"></div>
  </div>
</div>

但是我感覺我不得不為每個(gè)感覺不正確的視口重寫標(biāo)記。

這是我目前所得到的，這感覺像是一個(gè)可行/靈活的解決方案嗎？

.container-col-inner {
  padding-left: 16px;
}

.demo-card {
  border: 1px solid red;
  width: 100%;
  height: 432px;
  margin-bottom: 40px;
}

<div class="card-container-component">
  <div class="container row flex-column flex-md-row g-0">
    <div class="col-12 col-md-6 col-lg-3 container-col-inner">
      <div class="demo-card">Test 1</div>
    </div>
    <div class="col-12 col-md-6 col-lg-3 container-col-inner">
      <div class="demo-card">Test 2</div>
    </div>
    <div class="col-12 col-md-6 col-lg-3 container-col-inner">
      <div class="demo-card">Test 3</div>
    </div>
    <div class="col-12 col-md-6 col-lg-3 container-col-inner">
      <div class="demo-card">Test 5</div>
    </div>
    <div class="col-12 col-md-6 col-lg-3 container-col-inner">
      <div class="demo-card">Test 6</div>
    </div>
  </div>
</div>