Angular 角网格布局说明

我理解基本的角网格布局，因为它是任何给定行中的12列系统。但有时会让人很困惑。我不确定如何解释以下网格布局：

<div class="container widgets">
  <div class="row">
    <div class="col-xl-8 col-lg-12 widget-cont">
      <div class="widget">
          1.<app-blank></app-blank>
      </div>
    </div>
    <div class="col-xl-4 col-lg-6 col-md-12 widget-cont">
      <div class="widget">
        2.<app-blank></app-blank>
      </div>
    </div>
    <div class="col-xl-5 col-lg-6 col-md-12 widget-cont">
      <div class="widget">
        3.<app-blank></app-blank>
      </div>
    </div>
    <div class="col-xl-7 col-lg-12 widget-cont">
      <div class="widget" id="graph-single-reach">
        4.<app-blank></app-blank>
      </div>
    </div>
  </div>  
</div>

一,

我可以看到1列和2列加起来有12列，3列和4列也是如此，但是这些
col-lg-12
，
col-lg-6
，
col-md-12
等如何在这个布局中工作？？？
类设置列表用于在调整浏览器大小时定义组件的位置

每个
小部件cont
div
的类列表中的第一个设置用于水平空间不受限制时的默认布局。列表中的第二个设置是当浏览器的大小调整为更小时，在这种情况下，组件2不能再与组件1保持在同一行中，因此它将重新排列为与组件3位于同一行，每个都占据一半的空间（即
col-lg-6
），如下所示：


当浏览器进一步缩小时，类列表中的最后一个设置生效，因此，组件2和组件3都成为
col-md-12
，而组件1和组件4都已经成为
col-lg-12
，即每个空白组件本身占据整行，因此，整个布局变为单列，如下所示：