Jquery сортируемый пользовательский интерфейс не работает с заказом flexbox- *

Question

У меня возникают проблемы, когда я комбинирую сортируемый Jquery пользовательский интерфейс с bootstrap заказом класса flexbox - *

Когда я стабильно sh класс order- * внутри сортируемого контейнера, сортируемая функциональность не работает. Я могу перетащить элемент, но когда я отпускаю его, элемент возвращается в исходное положение. Если я не использую класс order- *, сортируемая функциональность работает нормально.

Кажется, что класс flexbox order- * преобладает над сортируемой функциональностью. Я думал об уничтожении порядка классов - * однажды загрузив html, но это странное решение.

Чего я хочу добиться, так это показать порядок, желаемый пользователем, и что новый порядок будет сохранен, когда заказ

<script type="text/javascript">
     $(document).ready(function()
          $( ".sortable" ).sortable({ placeholder: "ui-state-highlight" });
          $( ".sortable" ). 
     });
</script> 

<!--Works Fine-->
<div id="main" class="sortable d-flex flex-row">
     <div style="background-color:coral; width:50px;">1</div>
     <div style="background-color:lightblue; width:50px;">3</div>
     <div style="background-color:lightgreen; width:50px;" >2</div>
     <div style="background-color:pink; width:50px;">4</div>
</div>

<!--doesn't work-->
<div id="main" class="sortable d-flex flex-row">
     <div style="background-color:coral; width:50px;" class="order-1">1</div>
     <div style="background-color:lightblue; width:50px;" class="order-3">3</div>
     <div style="background-color:lightgreen; width:50px;" class="order-2">2</div>
     <div style="background-color:pink; width:50px;" class="order-4">4</div>
</div>

Спасибо за помощь