Aruta,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body {
counter-reset: myCounter 0;
}
.order_position span:after {
counter-increment: myCounter 1;
content: counter(myCounter)')';
text-align: center;
margin: 5px 10px;
}
.order__wrap:first-of-type .nav__triangle-up, .order__wrap:last-of-type .nav__triangle-down {
display: none;
}
.order__wrap {
border: 2px solid #8b4513;
margin: 4px;
}
.nav__triangle-up:before {
content: '▲';
}
.nav__triangle-down:before {
content: '▼';
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".order__wrap").on("click", ".nav__triangle-up, .nav__triangle-down", function(event) {
var parent = $(event.delegateTarget),
down = this.classList.contains("nav__triangle-down");
down ? parent.next().insertBefore(parent) :
parent.insertBefore(parent.prev())
})
});
</script>
</head>
<body>
<div class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span></span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
... box
</div>
</div>
</div>
<div class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span></span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
... room
</div>
</div>
</div>
<div class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span></span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
... cat
</div>
</div>
</div>
<div class="order__wrap dflex">
<div class="order__half dflex">
<div class="order__nav dflex">
<div class="nav__triangle-up dflex"> //кнопка перемещения заказа вверх на 1 строку
....
</div>
<div class="nav__triangle-down dflex"> //кнопка перемещения заказа вниз на 1 строку
....
</div>
</div>
<div class="order_position">
<span></span> //вот это число надо менять на +1 или -1 при переходе строки вверх/вниз
</div>
<div class="order__data">
... data
</div>
</div>
</div>
</body>
</html>