想法是将data-*属性添加到按钮中，告诉它们应该在顶部按哪个div。然后单击按钮，按照data-target-div属性中的设置获取div，克隆它并将其从DOM中删除。现在使用prepend将克隆的div添加到主div中

$(function(){
  $('button.regular').on('click',function(){
     var $div = $($(this).data('target-div'));
     var clonedDiv = $div.clone();
     $div.remove();
     $('#mainDiv').prepend(clonedDiv);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mainDiv">
<div id="firstDiv" class="row mothers_day-row mothers_day-row-share">
    <div class="col-xs-12">
           Text 1
    </div>
</div>

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


 <button class="regular mothers_day_first_button" id="mothers_day1" data-target-div="#firstDiv">First row on top</button>

 <button class="regular mothers_day_second_button" id="mothers_day2" data-target-div="#secondDiv">Second row on top</button>

你好，既然你问了Change position问题，我就把这个答案贴出来：请检查演示https://jsfiddle.net/7a4pqL1r/1/

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>

CSS

.mothers_day-row-share , .mothers_day-row-create{
    height:100px;
    margin:10px;
    border:1px solid grey;
    width:100px;
    position:relative;
    color:#fff;

  }
 .mothers_day-row-share {
   background:red;
 } 

 .mothers_day-row-create {
   background:blue;
 }

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"});
  });
});

您可以非常简单地使用Element: before()方法。

var row0 = document.getElementsByClassName('row')[0]
var row1 = document.getElementsByClassName('row')[1]

row1.before(row0);

https://developer.mozilla.org/en-US/docs/Web/API/Element/before