<div class="container text-center d-flex flex-column gap-4">

  <div class="row g-2">
    <div class="col-md-8">
      <span class="bp-md">.col-md-8</span>
    </div>
    <div class="col-6 col-md-4">
      <span class="bp-xs">.col-6</span> <span class="bp-md">.col-md-4</span>
    </div>
  </div>

  <div class="row g-2">
    <div class="col-6 col-md-4 col-lg-3">
      <span class="bp-xs">.col-6</span>
      <span class="bp-md">.col-md-4</span>
      <span class="bp-lg">.col-lg-3</span>
    </div>

    <div class="col-6 col-md-4 col-lg-9">
      <span class="bp-xs">.col-6</span>
      <span class="bp-md">.col-md-4</span>
      <span class="bp-lg">.col-lg-9</span>
    </div>

    <div class="col-6 col-md-4 col-lg-3">
      <span class="bp-xs">.col-6</span>
      <span class="bp-md">.col-md-4</span>
      <span class="bp-lg">.col-lg-3</span>
    </div>
  </div>

  <div class="row g-2">
    <div class="col-6">
      <span class="bp-xs">.col-6</span>
    </div>
    <div class="col-6">
      <span class="bp-xs">.col-6</span>
    </div>
  </div>

</div>

.bp-xs {
  color: greenyellow;
  font-size: 12px;
}
.bp-md,
.bp-lg {
  color: gray;
  font-size: 12px;
}

@media (min-width: 768px) {
  [class*="col-md-"] .bp-xs {
    color: inherit;
  }
  [class*="col-md-"] .bp-md {
    color: greenyellow;
  }
}

@media (min-width: 992px) {
  [class*="col-lg-"] .bp-xs,
  [class*="col-lg-"] .bp-md {
    color: inherit;
  }
  [class*="col-lg-"] .bp-lg {
    color: greenyellow;
  }
}