Html 间距及；使用Bootstrap 4调整列大小

我正在做一个项目，我有一些麻烦，让所有的东西都正确地排列在正确的间距。我应该怎么做（只使用col类和bootstrap4，不使用CSS）才能让它工作

---

我尝试了多个边距间距（如ml-md-4）和偏移（如offset-md-1），但似乎没有任何效果。

列具有填充以创建边沟（列之间的间距）。因此，除非将背景放在列的内容上，否则背景色将混合在一起。另外，使用

col-md-6

not

col-md-5

<section class="row">
        <div class="col-12 mb-3">
            <div class="bg-info" style="height: 175px;"></div>
        </div>
        <!-- one -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- two -->
        <div class="col-12 col-md-6 mb-md-4 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- three -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- four -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
</section>

---

列具有填充以创建边沟（列之间的间距）。因此，除非将背景放在列的内容上，否则背景色将混合在一起。另外，使用

col-md-6

not

col-md-5

<section class="row">
        <div class="col-12 mb-3">
            <div class="bg-info" style="height: 175px;"></div>
        </div>
        <!-- one -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- two -->
        <div class="col-12 col-md-6 mb-md-4 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- three -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
        <!-- four -->
        <div class="col-12 col-md-6 mb-3">
            <div class="bg-info" style="height: 100px;"></div>
        </div>
</section>