Html 跨越自举列

我需要帮助获得引导布局，如下图所示。我不知道如何使黄色条显示在引导容器的整个宽度上，而不影响列在移动视图上的堆叠方式（第二幅图像）

因此，我不需要在mobile view上显示黄色条，但必须保留列的堆叠顺序。我曾尝试在中间列中插入一个div，并迫使它离开它，但它并没有真正起作用（最近我得到的是负边距，但只是与其他列重叠，我不知道确切的数字，我应该申请每一个边距，使它看起来不错）。 下面是我的HTML结构-我已经删除了黄色的部分，因为我真的不知道它应该去哪里

<div class="col-md-4">
    col 1 header<br/>col 1 contents
</div>
<div class="col-md-4">
    col 2 header<br/>col 2 contents
</div>
<div class="col-md-4">
    col 3 header<br/>col 3 contents
</div>

第1列标题
第1列内容
第2列标题
第2列内容
第3列标题
第3列内容

---

如果有人能建议这是否可能与引导有关，并给我一些指导，我们将不胜感激。

针对不同设备的推送和拉送引导类可以提供帮助

只需放置

xs

而不是

lg

，并参考以下链接

要隐藏黄色div，请使用

.hidden xs

您可以在内容上使用col-xs-pull-6或col-xs-pull-12

---

如果您在问题中提到了您的代码，我会解决这个问题。

针对不同设备的push和

pull的引导类可能会有所帮助

只需放置
xs
而不是
lg
，并参考以下链接


要隐藏黄色div，请使用
.hidden xs

您可以在内容上使用col-xs-pull-6或col-xs-pull-12

如果您在问题中提到您的代码，我会解决这个问题。
如果cols header和yellow div具有固定的高度，您可以在header和content之间设置边距，并按它们之间的绝对值设置yellow div
如果cols header和yellow div具有固定的高度，您可以在header和content之间设置边距，并按两者之间的绝对值设置yellow div我认为最好的方法是使用flexbox，而不是引导。您必须对所有div重新排序以获得所需的效果，但是使用引导列时，您会发现许多问题。这是我的解决方案（调整大小以查看其工作方式）：


*{
框大小：边框框；
}
.包装部{
边框宽度：2倍；
边框样式：实心；
填充物：5px；
}
.wrapper分区：第n个子项（1），
.wrapper分区：第n个子项（2）{
边框颜色：红色；
}
.wrapper div:n个孩子（3），
.wrapper分区：第n个子项（4）{
边框颜色：蓝色；
}
.wrapper div:n个孩子（5），
.wrapper分区：第n个子项（6）{
边框颜色：绿色；
}
.包装纸.黄色{
显示：无；
}
@介质（最小宽度：768px）{
.包装纸{
显示器：flex；
柔性包装：包装；
}
.包装部{
弹性：133%；
}
.wrapper分区：第n个子项（1）{
顺序：1；
}
.wrapper分区：第n个子项（2）{
顺序：5；
}
.wrapper分区：第n个子项（3）{
顺序：2；
}
.wrapper分区：第n个子项（4）{
顺序：6；
}
.wrapper分区：第n个子项（5）{
顺序：3；
}
.wrapper分区：第n个子项（6）{
订单：7份；
}
.包装纸.黄色{
显示：块；
边框颜色：黄色；
顺序：3；
弹性：0.100%；
文本对齐：居中；
}
}

第1列标题
第1栏内容
第2列标题
第2列内容
第3列标题
第3栏内容
全宽div
我认为最好的方法是使用flexbox，而不是引导。您必须对所有div重新排序以获得所需的效果，但是使用引导列时，您会发现许多问题。这是我的解决方案（调整大小以查看其工作方式）：


*{
框大小：边框框；
}
.包装部{
边框宽度：2倍；
边框样式：实心；
填充物：5px；
}
.wrapper分区：第n个子项（1），
.wrapper分区：第n个子项（2）{
边框颜色：红色；
}
.wrapper div:n个孩子（3），
.wrapper分区：第n个子项（4）{
边框颜色：蓝色；
}
.wrapper div:n个孩子（5），
.wrapper分区：第n个子项（6）{
边框颜色：绿色；
}
.包装纸.黄色{
显示：无；
}
@介质（最小宽度：768px）{
.包装纸{
显示器：flex；
柔性包装：包装；
}
.包装部{
弹性：133%；
}
.wrapper分区：第n个子项（1）{
顺序：1；
}
.wrapper分区：第n个子项（2）{
顺序：5；
}
.wrapper分区：第n个子项（3）{
顺序：2；
}
.wrapper分区：第n个子项（4）{
顺序：6；
}
.wrapper分区：第n个子项（5）{
顺序：3；
}
.wrapper分区：第n个子项（6）{
订单：7份；
}
.包装纸.黄色{
显示：块；
边框颜色：黄色；
顺序：3；
弹性：0.100%；
文本对齐：居中；
}
}

第1列标题
第1栏内容
第2列标题
第2列内容
第3列标题
第3栏内容
全宽div