如何在引导程序中保持两列相互重叠，另一列保持在右侧？

Question

我只是想知道是否可以在 flexbox（没有 javascript 或定位或 css 网格）中更改这样的布局。在桌面上 在电话上它应该如下所示 我正在使用引导程序 4，并且可以选择更改订单，但即使这样也无法满足预期。

我可以使用 float 实现功能

<div class="container">
        <div class="float-none float-lg-left col-lg-6">1</div>
        <div class="float-none float-lg-right">2</div>
        <div class="float-none float-lg-left col-lg-6">3</div>
      </div>

Answer 1

我知道我这个问题有点晚了，也不完全是 Bootstrap 4 flexbox - 但你可以用display:flex 和媒体查询来做到这一点。您只需要在父级上设置一个高度（在本例中为 .wrapper），以便框 1 和 3 是该高度的“50%”。

查看sn-p全屏可以看到box的切换：

.wrapper {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 200px;
}

.box1 {
  background: #31d1d3;
}

.box2 {
  background: #bce9e2;
}

.box3 {
  background: #62b1b7;
}

@media screen and (min-width:797px) {
  .box2 {
    order: 3;
  }
  .box1,
  .box3 {
    flex: 0 0 50%;
    width: 50%;
  }
  .box2 {
    flex: 0 0 100%;
    width: 50%;
  }
}

<div class="container">
  <div class="wrapper">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
  </div>
</div>

Answer 2

如果没有 CSS 网格，可能 但是 第 2 列 必须 小于第 1 列和第 3 列的总和.

* {
    box-sizing: border-box;
}

.box {
    border: 1px solid grey;
}

@media (min-width: 576px) {

    .wrapper {
        padding-right: 50%;
        position: relative;
    }

    .box--2 {
        position: absolute;
        height: 100%;
        right: 0;
        top: 0;
        width: 50%;
    }

}

<div class="wrapper">
    <div class="box">Column 1</div>
    <div class="box box--2">Column 2</div>
    <div class="box">Column 3</div>
</div>

.wrapper 的大小将根据流中元素的高度（第 1 列和第 3 列）计算得出。如果第 2 列比这两个高，它会溢出包装器，如果没有 JavaScript，您将无法解决此问题。

老实说，使用 CSS Grid（带有 IE 后备）是更好的解决方案。