将HTML表迁移到Bootstrap 4网格问题

Question

我有一个HTML表格：

    <table border=1>
    <tr>
        <td>Days</td>
        <td>Su</td>
        <td rowspan=2>Total<br>Hour</td>
    </tr>
    <tr>
        <td>Resident Support<br>Team Members</td>
        <td>1</td>
    </tr>   
</table>    

我想将其转换为Bootstrap 4网格，代码如下：

    <style>
        div
        {
            padding:0!Important;
            margin:0!Important;
        }
    </style>
<div class="container">
  <h1>Responsive Bootstrap</h1>
  <div class="row">
    <div class="col-lg-5 col-md-5 col-sm-5 col-xs-5">
        <div class="row d-flex h-100">      
          <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border">Days</div>
          <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border">Resident Support<br>Team Members</div>
        </div>  
    </div>
    <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1">
        <div class="row d-flex h-100">  
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border">Su</div>
            <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 border">1</div>
        </div>  
    </div>  
    <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2 border">
        Total<br>Hour
    </div>
  </div>
</div>      

然而，上部细胞的高度彼此不匹配。 如果我在多行中实现它，下部单元格的高度就不一样了。 我不知道如何在Bootstrap 4中做rowpan。

<style>
        div
        {
            padding:0!Important;
            margin:0!Important;
        }
    </style>    
  <div class="container">
        <div class="row">
            <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
                Days
            </div>
            <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
                Su
            </div>
        </div>  
        <div class="row">
            <div class="col-5 col-sm-5 col-md-5 col-lg-5 col-xl-5">
                Resident Support<br>Team Members
            </div>
            <div class="col-1 col-sm-1 col-md-1 col-lg-1 col-xl-1">
                1
            </div>
        </div>          
    </div>