Boxes cannot be sorted when using sortable() - html

Question

I would like to switch the left box with the right box. I am using the function sortable() from jQuery UI. As you see in my code, it works fine for the numbers of 1 and 2 but not for the boxes to switch them left and right.
$(".sort-me").sortable({
connectWith: ".connectedSortable"
});
.title {
background: red;
}
.storename {
background: blue;
}
.row {
margin-top: 1rem;
margin-bottom: 1rem;
}
/* metatag generator relevant */
.mg-item {
display: inline-block;
}
.mg-item-inner {
display: flex;
}
.mg-item-inner .btn-group .btn .name {
margin-right: 1rem;
}
.mg-item-inner>.btn-group:not(.collapsed)>.btn:first-child {
cursor: -webkit-grab;
cursor: grab;
}
.mg-item-inner .input-group-btn:only-child>.btn {
border-radius: 4px;
}
.mg-item-inner>.btn-group,
.mg-item-inner>.input-group {
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 10px 20px rgba(0, 0, 0, 0.04);
}
.mg-item-inner>.btn-group+.input-group,
.mg-item-inner>.input-group+.input-group,
.mg-item-inner>.btn-group+.btn-group,
.mg-item-inner>.input-group+.btn-group {
margin-left: -1px;
}
.mg-item span.add {
background: transparent;
color: #444;
padding-left: 0;
margin-left: 0;
}
.mg-item span.add:active {
box-shadow: unset;
color: #313131;
}
.mg-item span.add .fa-plus-circle {
opacity: 0;
}
.mg-item:hover span.add .fa-plus-circle {
opacity: 1;
}
/*# sourceMappingURL=mg.css.map */
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"></script>
<div class="container">
<!-- Title -->
<div class="row">
<div draggable="true" class="sort-me title connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Gibt den Seitentitel aus'>
<span class="name">TITLE</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
<!--STORE NANE -->
<div draggable="true" class="sort-me storename connectedSortable">
<div class="col-md-3">
<div class="mg-item-inner">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" data-container='body' title='Fügt den Storename hinzu'>
<span class="name">STORENAME</span><i class="fas fa-arrows-alt"></i></button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Linie Erweitern / Reduzieren">
<i class="fas fa-swatchbook"></i></button>
</div>
<!-- /btn-group -->
<div class="input-group" role="group">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">prefix <i class="fas fa-sort"></i></button>
<ul class="dropdown-menu">
<li>prefix</li>
<li>suffix</li>
<li>none</li>
</ul>
</div>
<!-- /input-btn-group -->
<input type="text" class="form-control">
</div>
<!-- /input-group --><span type="button" class="btn add"><i class="fas fa-plus-circle"></i></span>
</div>
<!-- /mg-item-inner -->
</div>
<!-- /mg-item -->
</div>
</div>
</div>
<div class="sort-me">
<div class="connectedSortable">
<h1>
1
</h1>
</div>
<div class="connectedSortable">
<H1>2</H1>
</div>
</div>
https://jsfiddle.net/mjc9as5L/
What is the reason that the boxes can not be sorted? Is there a CSS issue maybe?

Answer 1

Try to add flex to your row, it might solve your problem.
.container > .row{
display:flex;
flex-direction:row-reverse;
justify-content:start;
}