如何让 Bootstrap 使我的组件低于另一个组件答案

【问题标题】：how to have Bootstrap make my component drop below another component如何让 Bootstrap 使我的组件低于另一个组件
【发布时间】：2022-11-01 21:12:28
【问题描述】：

我想我了解了引导程序的基础知识以及如何为列分配大小。但不知何故，我似乎没有解决这个简单的用例。

用例：

我有 2 个组件，比如 Todo-list 应用程序：

组件“新待办事项”（表单输入字段）
组件“待办事项列表”（表列表）

我想在大屏幕“New Todo”组件在右侧（占据屏幕的一半），“Todo List”组件在左侧（占据屏幕的一半）。

但是在小（移动）屏幕，“New Todo”组件应该在顶部，“Todo List”组件应该移到它下面。

额外的问题：如何使“新待办事项”输入字段在移动小屏幕上可折叠？

【问题讨论】：

标签： javascript bootstrap-5

【解决方案1】：

不需要Bootstrap。您可以将这两个组件包装在 display:flex 容器中，并在移动媒体查询中更改 order 属性。

但如果你真的想使用 Bootstrap，这里是指向 Bootstrap flex utilities. 的链接

  .container {
  display: flex;
}

.new-todo,
.todo-list {
  background-color: red;
  padding: 5px;
  flex: 50%
}

@media (max-width:480px) {
  .container {
    flex-wrap: wrap;
  }
  .new-todo,
  .todo-list {
    flex: 100%
  }
  .new-todo {
    order: 1
  }
  .todo-list {
    order: 2
  }
}

<div class="container">
  <div class="todo-list">todo-list</div>
  <div class="new-todo">new-todo</div>
</div>

【讨论】：

谢谢，但我真的很想坚持使用 Bootstrap。