Bootstrap 4 在bootstrap4列中嵌套3列时出现问题

在下面的代码中，我希望嵌套在左侧第2列中的3列（A为3，B为3，C为3）看起来像“列”，而不是像行一样显示。我做错了什么？谢谢

小提琴：

代码文本：

<div class="container">
   <div class="row">
      <div class="col-sm-3">
         q1 of 4
      </div>
      <div class="col-sm-3"><!--Issue is 
         <div class="col"> 
            A of 3 
         </div>
         <div class="col">
            B of 3 
         </div>
         <div class="col-sm-3">
            C of 3 
         </div>
      </div>
      <div class="col-sm-3">
         q3 of 3
      </div>
      <div class="col-sm-3">
         q4 of 4
      </div>
   </div>
</div>

第1季度，共4期
您需要使用另一个
.row
来包装内部列



第1季度，共4期
A/3
B/3
C/3
第3季度，共3季度
第4季度，共4季度
感谢您的快速回复和一直以来的大力帮助。有一天，我可能会学到一些东西。。。
<div class="container">
    <div class="row">

        <div class="col-sm-3">
            q1 of 4
        </div>

        <div class="col-sm-3">
            <div class="row">
                <div class="col-2">
                    A of 3
                </div>

                <div class="col">
                    B of 3
                </div>
                <div class="col">
                    C of 3
                </div>
            </div>
        </div>

        <div class="col-sm-3">
            q3 of 3
        </div>
        <div class="col-sm-3">
            q4 of 4
        </div>
    </div>
</div>