<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<!--<script src="http://code.jquery.com/jquery-latest.js"></script>-->
<style>
body { display: flex; justify-content: center; }
.block { width: 30%; text-align: center; }
.first { background: green; }
.second { background: blue; }
.third { background: red; }
</style>
<body>
<div class="block">
<div class="first">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
<div class="second">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
<div class="third">
<button class='up'>Меня вверх</button>
<button class='down'>Меня вниз</button>
</div>
</div>
<script>
[].forEach.call(document.getElementsByTagName('button'), function(item) {
item.addEventListener('click', function(e) {
var target = e.target, div = target.parentNode, parentDiv = div.parentNode;
if( target.classList.contains('up') ) {
(parentDiv.firstElementChild == div)
? parentDiv.insertAdjacentElement('beforeEnd', div)
: div.previousElementSibling.insertAdjacentElement('beforeBegin', div);
} else if( target.classList.contains('down') ) {
(parentDiv.lastElementChild == div)
? parentDiv.insertAdjacentElement('afterBegin', div)
: div.nextElementSibling.insertAdjacentElement('afterEnd', div);
}
});
});
</script>
</body>
</html>