Javascript 根据单击的按钮更改两个引导行的位置

我的页面上有两个引导行，屏幕顶部有两个按钮。我想，当单击第二个按钮时，第二行位于第一行的顶部，反之亦然。
那是我的两排

<div class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
           Text
    </div>
</div>

<div class="row mothers_day-row mothers_day-row-create">
    <div class="col-xs-12">
          Text 2
    </div>
</div>

正文
文本2

我的纽扣是这样的

 <button class="regular mothers_day_first_button" id="mothers_day1">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2">Second row on top</button>

顶部第一行
上面第二排

的想法是将

数据-*

属性添加到按钮中，告诉它们要在顶部按哪个div。然后单击按钮，将div作为其

数据目标div

属性中的设置，对其进行克隆并将其从DOM中删除。现在使用

prepend

将克隆的

div添加到主div中


$（函数（）{
$（'button.regular'）。在（'click'，function（）上{
var$div=$（$（this.data（'target-div'））；
var clonedDiv=$div.clone（）；
$div.remove（）；
$（'mainDiv'）.prepend（clonedDiv）；
});
});

文本1
文本2
第一排在上面
顶部第二行
您好，因为在您的问题中，您询问了
更改位置
我发布了以下答案：请检查演示

HTML

<button class="regular mothers_day_first_button" id="mothers_day1">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2">Second row on top</button>

<div class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
           ROW1
    </div>
</div>

<div class="row mothers_day-row mothers_day-row-create">
    <div class="col-xs-12">
          ROW2
    </div>
</div>

jQuery

$(document).ready(function(){
    $('.mothers_day_second_button').on('click', function(){
  console.log('hi');
    $('.mothers_day-row-share').animate({top: "110px"}); 
    $('.mothers_day-row-create').animate({top: "-110px"});
  });

  $('.mothers_day_first_button').on('click', function(){
  console.log('hi');
    $('.mothers_day-row-create').animate({top: "0px"}); 
    $('.mothers_day-row-share').animate({top: "0px"});
  });
});

希望您至少尝试自己编写此代码。堆栈溢出不是代码编写服务。我建议你做一些额外的研究，要么通过谷歌，要么通过搜索，尝试一下。如果您仍然有问题，请返回您的代码，并解释您尝试了什么以及为什么它不起作用。因此，如果clic在第二位，您需要移动到顶部div，文本为2。你可以创建一个父div并使用append和prepend移动第二个div。@Paulie_D你说得对，我是一个初级web开发人员，我不太擅长javascript。我相信这是一项需要完成的复杂任务，这就是为什么我这样问这个问题。在发帖之前，我也做了很多研究，但在我的问题中，我找不到值得补充的东西。谢谢，非常快速和详细的回答！我知道这是公认的答案，但。。。解决方法不是改变div的位置。。。您正在剪切、复制和粘贴div…@RRR我同意，但我不认为使用CSS定位div是有效的，因为您不知道div可能会变得多么复杂（示例中没有），就像您可能最终会使用CSS创建子节点一样。。所以我认为这是正确的。。。如果我错了，请纠正我。问题是，由于响应性，我不想设置行的高度，并且行的元素将动态更改
$(document).ready(function(){
    $('.mothers_day_second_button').on('click', function(){
  console.log('hi');
    $('.mothers_day-row-share').animate({top: "110px"}); 
    $('.mothers_day-row-create').animate({top: "-110px"});
  });

  $('.mothers_day_first_button').on('click', function(){
  console.log('hi');
    $('.mothers_day-row-create').animate({top: "0px"}); 
    $('.mothers_day-row-share').animate({top: "0px"});
  });
});