使用Flex CSS和Bootstrap实现响应式布局

我已经在台式机、平板电脑和手机大小之间试验了一段时间，但在下面的布局中遇到了问题。

我使用的是Bootstrap中的网格布局，但由于它是两列，随着宽度缩小，第二列位于左侧的Main Content部分下方。我想将其拆分为状态下方的屏幕大小。

这是起始视图：

这是我希望发生的事情：

这将是手机视图：

因此，宽视图在测试期间会缩小，我希望它跳转到移动视图，在该视图中，顶部侧栏位于主要内容上方并与主要内容的宽度匹配，而底部侧栏对底部执行相同的操作。

将两个侧边栏都放在底部很容易，但我想尝试一下将其分开的可能性。

为了测试，我使用的是Flexbox、CSS3和bootstrap5+，没有插件或Java脚本。

css

解决方案1：您可以将cssfloat功能与float-end和float-start引导类ref：

一起使用推荐答案 数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid vh-100 vw-100 py-2 bg-light clearfix">
  <div class="float-sm-end   col-sm-4 col-12 h-25  bg-secondary">Sidebar Top</div>
  <div class="float-sm-start col-sm-8 col-12 h-100 bg-warning">Content</div>
  <div class="float-sm-end   col-sm-4 col-12 h-25  bg-info">Sidebar bottom</div>
</div>

进入Full page视图并将浏览器宽度减小到576px以下以查看响应更改。
我在这里使用过小断点col-sm-*，使用不同的breakpoints来处理different devices。

整个引导v5.1.3 css文件中只有d-*-grid规则。其余内容为experimental。

---

解决方案2：使用Flexbox，处理顺序和包装。@Rana答案的改进版本：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex flex-column flex-sm-wrap vh-100 vw-100 py-2 bg-light">
  <div class="order-sm-1 order-2 col-sm-8 col-12 h-100 bg-warning">Content</div>
  <div class="order-sm-2 order-1 col-sm-4 col-12 h-25  bg-secondary">Sidebar Top</div>
  <div class="order-sm-3 order-3 col-sm-4 col-12 h-25  bg-info">Sidebar bottom</div>
</div>