<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<td><b>Вопрос</b></td>
<td>
<b>Ответ</b>
</td>
<td style="width: 325px;">
<b>Действия</b>
</td>
</tr>
</thead>
  
<tbody>
<tr class="MenuTableRow row-first" data-row-id="1">
<td>Вопрос 1</td>
<td>Ответ 1</td>
<th>
<a class="icon-arrow-up" title="Переместить в самый верх" href="#">Переместить в самый верх</a><br>
<a class="icon-arrow-down" title="Переместить в самый низ" href="#">Переместить в самый низ</a>
</th>
</tr>
<tr class="MenuTableRow" data-row-id="2">
<td>Вопрос 2</td>
<td>Ответ 2</td>
<th>
<a class="icon-arrow-up" title="Переместить в самый верх" href="#">Переместить в самый верх</a><br>
<a class="icon-arrow-down" title="Переместить в самый низ" href="#">Переместить в самый низ</a>
</th>
</tr>
<tr class="MenuTableRow row-last" data-row-id="3">
<td>Вопрос 3</td>
<td>Ответ 3</td>
<th>
<a class="icon-arrow-up" title="Переместить в самый верх" href="#">Переместить в самый верх</a><br>
<a class="icon-arrow-down" title="Переместить в самый низ" href="#">Переместить в самый низ</a>
</th>
</tr>
</tbody>
</table>


var MenuTableRow = {
  '1':{ name:'111111',description:'3333333'},
  '2':{ name:'1111111',description:'3333333'},
  '3':{ name:'11111',description:'33333'}
};

var menu = new BootstrapMenu('.MenuTableRow', {

  fetchElementData: function($rowElem) {
    var rowId = $rowElem.data('rowId');
    return MenuTableRow[rowId];
  },
  actions: [{
    name: 'Редактировать',
    onClick: function(row) {
      alert('Редактировать');
    }
  },
  {
    name: 'Сделать копию',
    onClick: function(row) {
      alert('Сделать копию');
    }
  },
  {
    name: 'Удалить',
    onClick: function(row) {
      alert('удалить');
    }
  },
  {
    name: 'Переместить в самый верх',
    onClick: function(row) {
      
      rowfirst();
      
    }
  },
  {
    name: 'Переместить в самый низ',
    onClick: function(row) {
     
    rowlast();
      
    }
  }]
});


 function rowfirst(){
 alert('Переместить вверх');

      let line=$(this).closest('.MenuTableRow');
      let tbody=$(this).closest('tbody');
      line.prependTo(tbody);
      let rows=$('.MenuTableRow',tbody);
      rows.removeClass('row-first').removeClass('row-last');
      rows.first().addClass('row-first');
      rows.last().addClass('row-last');

 }

 function rowlast(){
 alert('Переместить вниз');

      let line=$(this).closest('.MenuTableRow');
      let tbody=$(this).closest('tbody');
      line.appendTo('tbody');
      let rows=$('.MenuTableRow',tbody);
      rows.removeClass('row-first').removeClass('row-last');
      rows.first().addClass('row-first');
      rows.last().addClass('row-last');
   
 }




$(document).on('click', 'a', function () {
    if ($(this).is(".icon-arrow-up")) {
      let line=$(this).closest('.MenuTableRow');
      let tbody=$(this).closest('tbody');

      line.prependTo(tbody);
      
      let rows=$('.MenuTableRow',tbody);
      rows.removeClass('row-first').removeClass('row-last');
      rows.first().addClass('row-first');
      rows.last().addClass('row-last');
    }
    if ($(this).is(".icon-arrow-down")) {
      let line=$(this).closest('.MenuTableRow');
      let tbody=$(this).closest('tbody');
      
      line.appendTo('tbody');
      
      let rows=$('.MenuTableRow',tbody);
      rows.removeClass('row-first').removeClass('row-last');
      rows.first().addClass('row-first');
      rows.last().addClass('row-last');
    }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css
  3. https://dgoguerra.github.io/bootstrap-menu/css/bootstrap.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js
  2. https://dgoguerra.github.io/bootstrap-menu/dist/BootstrapMenu.min.js