如何让旋转div高度匹配内容并实现移动端方块每行两列布局

问题1：右侧旋转容器高度匹配左侧内容高度 #

当前右侧旋转的.multipleRect容器高度未与左侧内容对齐，核心原因是未让父容器和旋转容器充分利用高度，且旋转后的尺寸计算逻辑需要调整。

修改方案： #

1. 让右侧列容器与左侧等高：为右侧col-md-6添加Bootstrap内置类h-100（设置height:100%），确保它和左侧列高度完全一致。
2. 让旋转容器占满父容器高度：修改.multipleRect样式，移除max-height:80%，设置height:100%，添加transform-origin: center center保证旋转中心正确；同时用flex布局让内部方块垂直居中，避免旋转后内容偏移。
3. 适配方块宽度：将.greyRect的固定宽度200px改为width:calc(50% - 10px)，让每行两个方块自适应容器宽度，同时保留原有margin间距。

问题2：移动端卡片每行显示两个 #

当前移动端卡片使用col-sm-12导致每行仅显示一个，需调整栅格类适配移动端布局。

修改方案： #

将所有卡片的col-sm-12替换为col-sm-6 col-6，其中col-6针对超小屏幕（<576px）设置每行两个，col-sm-6针对小屏幕及以上保持每行两个的布局。

修改后的完整代码 #

HTML代码：

<div class="container-fluid caffstudio">
  <div class="row">
    <div class="col-md-6 caffLeft">
      <div class="row">
        <!-- caff logo -->
        <div class="col-md-4">
          <div class="cfimgdiv" style="display: inline-block">
            <img src="caffeine logomark.svg" class="imgcaff" />
          </div>
        </div>

        <!-- caff text -->
        <div class="col-md-8" style="display: inline-block">
          <div class="cafftext">Caffine UX Design Studio</div>
          <div class="cafftext1">
            Lorem ipsum dolor sit amet consectetur. Quisque velit cursus nulla aenean aliquam auctor orci.
          </div>
          <br />
          <a href="#" class="linkcaff mt-10">Visit Website</a>
        </div>

        <!-- first line of cards -->
        <div class="container-fluid">
          <div class="img4">
            <div class="row">
              <div class="col-md-6 col-sm-6 col-6 im4div">
                <div class="im4" style="display: inline-block">
                  <img src="experience.svg" />
                </div>
                <div class="im4txt" style="display: inline-block">
                  <div>5 yrs</div>
                  <div>Experience</div>
                </div>
              </div>
              <div class="col-md-6 col-sm-6 col-6 im4div">
                <div class="im4" style="display: inline-block">
                  <img src="projects.svg" />
                </div>
                <div class="im4txt" style="display: inline-block">
                  <div>25+</div>
                  <div>Projects completed</div>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-6 col-sm-6 col-6 im4div">
                <div class="im4" style="display: inline-block">
                  <img src="pipeline.svg" />
                </div>
                <div class="im4txt" style="display: inline-block">
                  <div>10+</div>
                  <div>Project in pipeline</div>
                </div>
              </div>
              <div class="col-md-6 col-sm-6 col-6 im4div">
                <div class="im4" style="display: inline-block">
                  <img src="screensdelivered.svg" />
                </div>
                <div class="im4txt" style="display: inline-block">
                  <div>1597</div>
                  <div>Screens delivered</div>
                </div>
              </div>
            </div>
          </div>
        </div>  
      </div>
    </div>
    <div class="col-md-6 col-sm-12 h-100" style="z-index: 1;">
        <div class="multipleRect">
          <div class="twoRect">
            <div class="greyRect"></div>
            <div class="greyRect"></div>
          </div>
          <div class="twoRect">
            <div class="greyRect"></div>
            <div class="greyRect"></div>
          </div>
          <div class="twoRect">
            <div class="greyRect"></div>
            <div class="greyRect"></div>
          </div>
        </div>
    </div>
  </div>
</div>

CSS代码：

.caffstudio{
  margin: 0 auto;
  background-color: #211E1E;
  position: relative;
  padding-left: 30px;
  overflow: hidden;
}

.greyRect{
  width: calc(50% - 10px);
  height: 200px;
  background: #D9D9D9;
  border-radius: 18.6457px;
  display: inline-block;
  margin: 5px;
}

.multipleRect{
  transform: rotate(12deg);
  transform-origin: center center;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

内容的提问来源于stack exchange，提问作者Syed Faraz Hasan