跨越Bootstrap列

Question

我需要帮助获取Bootstrap布局，如下图所示。我无法弄清楚如何让黄色条与Bootstrap容器的整个宽度一起出现而不影响列应该在移动视图上堆叠的方式（第二张图片）。

所以我不需要在移动视图上显示黄色条，但必须保留列堆叠的顺序。我已经尝试在中间列中插入一个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>

如果有人可以建议是否可以使用Bootstrap，并给我一些指导，那将非常感激。

Answer 1

如果cols标题和黄色div有固定的高度，你可以在标题和内容之间进行边距，并在它们之间设置黄色div绝对值

Answer 2

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

只需添加xs而不是lg，然后参考以下链接。

Bootstrap 3: pull-right for col-lg only

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

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

如果你在问题中提到你的代码，我会解决它。

Answer 3

而不是Bootstrap我认为最好的方法是使用flexbox。您必须重新排序所有div以获得所需的效果，但使用Bootstrap列您会发现许多问题。这是我的解决方案（调整大小以查看其工作原理）：

*{
  box-sizing: border-box;
}

.wrapper div {
  border-width: 2px;
  border-style: solid;
  padding: 5px;
}

.wrapper div:nth-child(1),
.wrapper div:nth-child(2) {
  border-color: red;
}

.wrapper div:nth-child(3),
.wrapper div:nth-child(4) {
  border-color: blue;
}

.wrapper div:nth-child(5),
.wrapper div:nth-child(6) {
  border-color: green;
}

.wrapper .yellow {
  display: none;
}

@media (min-width:768px) {
  .wrapper {
    display: flex;
    flex-wrap: wrap;
  }
  .wrapper div {
    flex: 1 1 33%;
  }
  .wrapper div:nth-child(1) {
    order: 1;
  }
  .wrapper div:nth-child(2) {
    order: 5;
  }
  .wrapper div:nth-child(3) {
    order: 2;
  }
  .wrapper div:nth-child(4) {
    order: 6;
  }
  .wrapper div:nth-child(5) {
    order: 3;
  }
  .wrapper div:nth-child(6) {
    order: 7;
  }
  .wrapper .yellow {
    display: block;
    border-color: yellow;
    order: 3;
    flex: 0 0 100%;
    text-align: center;
  }
}

<div class="wrapper">
  <div>col 1 header</div>
  <div>col 1 contents</div>

  <div>col 2 header</div>
  <div>col 2 contents</div>

  <div>col 3 header</div>
  <div>col 3 contents</div>

  <div class="yellow">div with full width</div>
</div>