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

Question

我一直在尝试台式机、平板电脑和手机尺寸之间的完全响应式布局，但我在使用下面的布局时遇到了问题。

我使用的是引导程序中的网格布局，但由于它是两列，随着宽度缩小，第二列位于左侧主要内容部分下方。我想将其拆分为屏幕下方的状态。

这是起始视图：

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

这是手机视图：

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

将两个侧边栏放在底部很容易，但我想尝试找出将其拆分的可能性。

为了进行测试，我使用了 flexbox、css3 和 bootstrap5+，没有插件或 javascript。

Answer 1

解决方案 1：您可以将 CSS float功能与float-endbootstrapfloat-start类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视图并将浏览器宽度减小到 576 像素以下以查看响应式更改。
我这里使用了小断点col-sm-*，使用不同的断点来处理不同的设备。

d-*-grid整个boostrap v5.1.3 CSS文件中只有规则。其余的东西是实验性的。

解决方案 2：使用 Flexbox，调整顺序和换行。@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>