Argiris A Argiris A - 7 months ago 19
Javascript Question

Change positioning of two bootstrap rows depending on the button you click

I have two bootstrap rows on my page and two buttons that appear on the top of the screen. I want, when the second button is clicked, then the second row comes on top of the first row and vice versa.

Those are my two rows

<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>


And my buttons will be something like this

<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>

Answer

Idea is to add data-* attributes to your buttons to tell them which div to push on top. Then on click of the buttons, take the div as set in its data-target-div property make a clone of it and remove it from the DOM. Now add the cloned div into your main div by using prepend

$(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>