Bootstrap 4 引导4第2列与第6列对齐

我需要把一根柱子和一根大柱子对齐

---

有人知道该怎么做吗？

对于这样的事情，我会考虑使用一个著名的库，如<强>砖石< /强>，它与Bootstrap兼容。

//外部js:mashine.pkgd.js
变量$grid=$（'.grid'）。砌体({
列宽：120，
itemSelector:“.grid项”
});
$grid.on（'click'，'grid项内容'，函数（事件）{
$（event.currentTarget）.parent（'.grid item'）.toggleClass（'is-expanded'）；
$grid.mashine（）；
});
*{
框大小：边框框；
}
身体{
字体系列：无衬线；
}
.电网{
背景：#EEE；
最大宽度：1200px；
}
.表格项目{
浮动：左；
}
/*项不可见，但用于布局*/
.表格项目，
.表格项目内容{
宽度：120px；
高度：120px；
}
/*网格项内容可见，并显示其大小*/
.表格项目内容{
宽度：120px；
高度：120px；
背景：#D26；
边框：2倍实心#333；
边框颜色：hsla（0,0%，0,0.5）；
边界半径：5px；
-webkit过渡：宽度0.4s，高度0.4s；
过渡段：宽度0.4s，高度0.4s；
}
.grid项：悬停.grid项内容{
边框颜色：白色；
背景：#A2C；
光标：指针；
}
/*项目和项目内容都会更改大小*/
.grid-item.is-expanded，
.grid-item.is-expanded.grid-item内容{
宽度：360px；
高度：240px；
}
.grid-item.is-expanded{
z指数：2；
}
.grid-item.is-expanded.grid-item内容{
背景:#F90；
}

砌体-设置项目大小的动画
单击项目以切换大小


<div class="container">
    <div class="row">
        <div class="col-md-6 d-table float-left" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
        <div class="col-6 col-md-2 d-table" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
        <div class="col-6 col-md-2 d-table" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
        <div class="col-6 col-md-2 d-table" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
        <div class="col-6 col-md-2 d-table" style="padding:5px;"><img src="bg-prop-image.jpg" class="img-fluid" /></div>
    </div>
</div>