如何在bootstrap-4和CSS中创建此样式而不破坏响应

Question

在此处输入图片描述

enter image description here

im尝试用引导程序和css创建图中所示的场景，而不会破坏网站的响应。

Answer 1

body {
  padding:0;
  margin:0;
}

.blue_cont {
  height:300px;
  width:90%;
  margin:200px auto 0;
  background:royalblue;
  position:relative;
}

.green_cont {
  position:absolute;
  width:50%;
  height:300px;
  background:green;
  bottom:100px;
  left:100px;
}

<div class="blue_cont">
  <div class="green_cont">
    
  </div>
</div>