你好，我是新来这里与角和css .我的目标是有这个页面上我的角项目：enter image description here但是我没有得到我想要的结果，我使用了bootstrab使其响应为col和row。如何对代码进行故障诊断以获得响应帧
我的意思是，当屏幕变小的块将是一个下其他除了响应和灵活的布局，我希望你能帮助我这我的html代码：

<div class="row">
  <div class="col-md-2 red ">
    sidebar
  </div>
  <div class="col-md-10  bleu">
    <h1> overview </h1>
    <div class=" row green"> block </div>
    <div class="row">
      <div class="col block">
        block1
      </div>
      <div class="col block ">
        block2
      </div>
    </div>
  </div>
</div>

这是CSS代码：

.red {
  height: 100vh;
  background-color: aqua;
}

.green {
  height: 30%;
  margin: 1%;
  background-color: green;
}

.bleu {
  background-color: blue;
}

.block {
  background-color: white;
  margin: 2%;
  width: 40%;
  height: 300px;
}