使用浏览器调整CSS形状元素的大小

我是新手。我已经创建了一些形状使用CSS，并希望它的大小随着浏览器。我已经包括了min.css

在大屏幕上，它看起来像这样，我想要相同的布局

我已经创建了一个正方形和两个圆形。当我调整大小时，我会将它一个叠在另一个下面。我希望在移动设备的大型设备上也能看到同样的布局，但我不能让它缩小

html:

---

如果要调整圆的大小，请使用宽度：100%

#sqr {
    position: relative;
    height: 400px;
    width:100%;
    max-width: 400px;
    background-color: red;
}
#circle1 {
    position: absolute;
    top: 400px;
    width:100%;
    max-width: 400px;
    height:100%;
    max-height:400px;
    border-radius: 50%;
    background-color: blue;
}
#circle2 {
    position: absolute;
    top: 800px;
    width:100%;
    max-width: 400px;
    height:100%;
    max-height:400px;
    border-radius: 50%;
    background-color: green;
}

---

尝试删除高度和宽度的固定值。它们总是这么大

改为签出：最大高度：400px，最小高度：100px/最小高度：25%

最大宽度：400px； 最大宽度：400px

#sqr{
    max-height: 400px;
    max-width:400px;
    background-color: red;
}

编辑： 检查是否正确链接了引导css/js

<div class="border row">
<div class="border col-sm-6">
<div id="circle1"></div>
</div>
<div class="border col-sm-6">
<div id="circle2"></div>
</div>   
</div>

和小提琴：

---

jsfiddle.net/cxcgL5s1

嘿，谢谢你。但我希望整个装置缩小。我想知道Bootstrap是否能提供一些帮助，因为它有助于响应他们为您更新了我的anwser，这里还有一个指向Bootstrap网格的链接。这将有助于使网站响应感谢的努力。它不像我想要的那样工作。我需要相同的设计，但更小的版本适合移动设备。因为我已经用CSS构建了我的形状，所以我发现很难理解。如果我使用了图像，我可以只使用img缩略图，它会把自己放在正确的位置，这也不起作用。我看到过一些例子，它们使它随着浏览器的大小而缩小。我希望Bootstrap能帮上忙。

<div class="border row">
<div class="border col-sm-6">
<div id="circle1"></div>
</div>
<div class="border col-sm-6">
<div id="circle2"></div>
</div>   
</div>