CSS：交换2个元素的位置

Question

我有两个由库创建的元素，所以我不能改变html本身的顺序：

<div class="search-container">
  <div class="tags"></div>
  <input class="search"/>
</div>
<div class="my-list">
...
</div>

我需要在div上面输入输入。我使用绝对位置移动了上面的输入：

.search-container {
  position: relative;
}

.search {
  position: absolute;
  top: 0px;
}

.tags {
  position: relative;
  top: 38px;
}

但我遇到了一些问题：

• .search-container高度不正确。
• .search-container不会随着添加更多标签而增长

有任何想法吗？

Answer 1

基于@mhatch评论我的问题。我实施了以下解决方案

.search-container {
  display: flex;
  flex-wrap: wrap;
}

.search {
  order: 1;
}

.tags {
  order: 20;
}