CSS：交换2个元素的位置

Question

我有2个由库创建的元素，因此无法更改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不会随着添加更多标签而增长

有什么想法吗？

Answer 1

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

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

.search {
  order: 1;
}

.tags {
  order: 20;
}