css - 使用 Flex CSS 和 Bootstrap 进行响应式布局

Question

我一直在尝试在台式机、平板电脑和手机尺寸之间进行完全响应式布局，但在使用下面的布局时遇到了问题。
我使用的是 Bootstrap 中的网格布局，但由于它是两列，随着宽度的缩小，第二列两列位于左侧下方，即主要内容部分。我想将其拆分为屏幕下方的状态。
这是起始 View :

这就是我想要发生的事情:

这将是手机 View :

因此，在测试过程中，宽 View 会缩小，我希望它跳转到移动 View ，其中顶部侧边栏高于主要内容并匹配主要内容的宽度，而底部侧边栏在底部做同样的事情。
将两个侧边栏放在底部很容易，但我想尝试找出将其拆分的可能性。
对于测试，我使用的是 flexbox、css3 和 bootstrap5+，没有插件或 javascript。

Answer 1

解决方案一:您可以使用 CSS float float-end 的功能和 float-start Bootstrap 类 ref :

<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 .
只有 d-*-grid整个 boostrap v5.1.3 CSS 文件中的规则。其余的东西是 experimental .

方案二:使用 flexbox，使用 order 和 wrap。 @Rana 答案的改进版本:

<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>