Structuring columns in HTML markup using Bootstrap Grid system

Question

I'm creating a "stacked" image component, at any one time 4 images are visible (.demo-card).

Desired behaviour:

• default (mobile): cards should be in a single column layout (as is currently)
• md (tablet): cards should be in displayed in 2 rows of 2 cards
• lg (desktop): cards should be displayed in a row of 4 cards

I'm struggling to get my head around how the markup should be arranged in this case, for example for tablet I'd use something like this:

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

But then it feels like I'd have to re-write the markup for each viewport which doesn't feel right.

Here's what I've got so far, does this feel like a viable/ flexible solution?

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