如何通过jQuery和CSS调整克隆后div元素的显示顺序？

我有如下容器：

<div id="mycontainer" class="main">
  <div class="content">Content here</div>
  <div class="title">title here</div>
</div>

使用jQuery克隆该div并追加到另一个div：

var $cloneBrick = $this.clone().prop("id", "mycontainerNEW");
$("#infopane").append($cloneBrick);

主页面中，title通过CSS绝对定位显示在content之前：

.mainpage .main .title {
    display: block;
    color: #5b5b5b;
    background: rgba(227, 227, 227, 0.4);
    width: 100%;
    height: 40px;
    top: 0;
    left: 0;
    margin-right: 80px;
    position: absolute;
    text-align: left;
    line-height: 40px;
    font-size: 12px;
}

但克隆到#infopane后，title显示在content之后。无法修改主页面，需通过jQuery或CSS调整克隆元素内div的顺序，求最优方案。

附代码示例：

var $cloneBrick = $("#mycontainer").clone().prop("id", "mycontainerNEW");
$("#infopane").append($cloneBrick);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="mycontainer" class="main">
  <div class="content">Content here</div>
  <div class="title">title here</div>
</div>

<hr/>

<div id="infopane">

</div>

方案一：CSS调整（推荐，无DOM操作开销） #

克隆后的元素位于#infopane下，可通过专属CSS规则实现视觉顺序调整：

方法1：复用绝对定位逻辑 #

给#infopane下的.main容器添加相对定位，让title的绝对定位生效，并给content加内边距避免遮挡：

#infopane .main {
  position: relative; /* 让子元素绝对定位基于当前容器 */
}
#infopane .main .title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background: rgba(227, 227, 227, 0.4);
  color: #5b5b5b;
  line-height: 40px;
  font-size: 12px;
}
#infopane .main .content {
  padding-top: 40px; /* 避免内容被title遮挡 */
}

方法2：用Flex布局反转顺序 #

如果不需要绝对定位，直接通过Flex布局调整子元素显示顺序：

#infopane .main {
  display: flex;
  flex-direction: column;
}
#infopane .main .title {
  order: -1; /* 让title排在content前面 */
}

方案二：jQuery调整DOM顺序（适合需真实DOM结构变更的场景） #

克隆后直接修改内部元素的DOM顺序，把title移到content前面：

var $cloneBrick = $("#mycontainer").clone().prop("id", "mycontainerNEW");
// 调整内部元素顺序：将title插入到content之前
$cloneBrick.find('.title').insertBefore($cloneBrick.find('.content'));
$("#infopane").append($cloneBrick);

方案对比 #

• CSS方案：无需修改DOM结构，性能更优，仅需视觉调整时首选。
• jQuery方案：直接变更DOM顺序，适合后续逻辑依赖真实元素顺序的场景。

内容的提问来源于stack exchange，提问作者user6625547