html - Bootstrap 网格不适合我的主容器

Question

我确信我做错了什么，今天早上我试图解决这个问题。

事情是这样的，我正在尝试构建一个响应式 HTML 页面，它将具有您在下面看到的图片的行为:

所以我告诉自己，对于必须移动的元素，例如“Besoin d'un devis”下面的元素等，我将使用 boostrap 网格，并为此使用 WYSIWIG 生成器。但是，当我尝试调整窗口大小时，会发生以下情况:

不调整窗口大小 - 正常行为:

当我调整窗口大小时并尝试测试 boostrap 网格:

我在网上上传了一个测试版，这样你就可以看到我的问题了。 http://test-stackoverflow.co.nf

如果你需要代码，我会提供。我只是不知道如何提供整个“测试网站”和堆栈中的这种情况。

Answer 1

<div class="container">
<div class="row">
<div class="col-sm-3">
<div class="content_block orange size_2"> 
<div class="icon fa fa-car"></div>
<div class="text">Auto</div>
</div>
</div>
<div class="col-sm-3">
<div class="content_block rose size_2"> 
<div class="icon fa fa-home"></div>
<div class="text">Habitation</div>
</div>
</div>
<div class="col-sm-2 col-md-3">
<div class="content_block green size_2"> 
<div class="icon fa fa-heart"></div>
<div class="text">Santé</div>
</div>
</div>
<div class="col-sm-2 col-lg-3"></div>
</div>
</div>

试试这个