如何在引导程序中将两列彼此顶部和另一列保持在右侧？

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％”。

全屏查看代码段，以查看框的开关：

.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网格，则 BUT 列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后备功能）是更好的解决方案。