Css 在引导程序中，如何使两个列彼此位于顶部，另一列位于右侧？

我只是想知道在flexbox中（没有javascript或定位或css网格）是否可以这样更改布局。在桌面上 在电话里应该是这样的 我使用的是Bootstrap4，可以选择改变顺序，但即使这样也不能满足期望

我能够使用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>

1.
2.
3.

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

*{
框大小：边框框；
}
.盒子{
边框：1px纯灰；
}
@介质（最小宽度：576px）{
.包装纸{
右：50%；
位置：相对位置；
}
.box--2{
位置：绝对位置；
身高：100%；
右：0；
排名：0；
宽度：50%；
}
}

第1栏
第2栏
第3栏

我知道我回答这个问题有点晚了，也不完全是bootstrap4flexbox——但你可以通过

display:flex

和媒体查询来做到这一点。您只需要在父对象上设置一个高度（在本例中为

.wrapper

），以便框1和框3为该高度的“50%”

查看代码段全屏以查看框的切换：

.wrapper{
显示器：flex；
弯曲方向：立柱；
柔性包装：包装；
高度：200px；
}
.box1{
背景#31d1d3；
}
.box2{
背景#bce9e2；
}
.box3{
背景#62b1b7；
}
@媒体屏幕和屏幕（最小宽度：797px）{
.box2{
顺序：3；
}
.box1，
.box3{
弹性：0.50%；
宽度：50%；
}
.box2{
弹性：0.100%；
宽度：50%；
}
}

1.
2.
3.

我希望在手机上的第一列和第三列之间插入正确的一列发布您迄今为止尝试过的代码。您可以发布您已经尝试过的代码吗？是的，检查，更新了代码为什么不能排成两行？这就是它的意图。我在问题中已经清楚地提到了，没有使用定位，只是为了了解第二列的高度大于第1列和第2列3@TajKhan对不起，我错过了那张纸条。在这种情况下：不，这是不可能的，谢谢你的建议css网格只是想知道它是可以使用的，因为我必须保持兼容性，直到ie10@TajKhanIE10和IE11有一个CSS网格版本。它不允许命名区域之类的内容，但您仍然可以定义列。