css - 如何使用 bootstrap 4 制作两个响应部分？

Question

我有两个分区框 1. 虚拟卡和 2. 实体卡。

需要帮助如何在 Bootstrap 中制作两个部分的 div？

我已经尝试过，但是当我以响应式的方式查看时，两个部分 div 的高度都会随机播放。

让我如何保持这两个部分的差距？

    <div class="container">
    <div class="row">
        <!-- Virtual cards -->
        <div class="col-sm-6 ">
            <h3 style="text-align: center; height: 45px;background-color: 
             #FFC107">Virtual cards</h3>
            <div><img class="img-fluid mx-auto d-block" src="image-01.png"  
             style="width:50%" >
            </div>enter code here
            <div>
                <h3 style="text-align: center; height: 45px;background-color: 
                #FFC107">Block</h3>
            </div>
        </div>

        <!-- Physical Cards -->
        <div class="col-sm-6 ">
            <h3 style="text-align: center; height: 45px;background-color: 
              #FFC107">Physical cards</h3>
            <div><img class="img-fluid mx-auto d-block" src="image/layer- 
                 3.png">
            </div>
            <div>
                <h3 style="text-align: center;">One For All</h3>
                <p style="text-align: center;">A single cards for all 
                  purchase</p>
            </div>
            <div><h3 style="text-align: center; height: 45px;background- 
              color: #FFC107">Block</h3>
            </div>
        </div>  
      </div>

Answer 1

就用

<div class="d-flex flex-row">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
  <div class="d-flex flex-row-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>

或

<div class="d-flex flex-column">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>
<div class="d-flex flex-column-reverse">
  <div class="p-2">Flex item 1</div>
  <div class="p-2">Flex item 2</div>
  <div class="p-2">Flex item 3</div>
</div>