jQuery Sortable and Bootstrap 3-适用于小型设备，不'；不能在大型设备上工作

我正在使用jquerysortable（）和bootstrap3

我正在尝试对表单中的行进行排序，我产生了以下代码：

 $("#timeline_list").sortable({
     handle: 'i.fa',
     onDrop: function (item, container, _super) {
         var data = $('#timeline_list').sortable("serialize").get();
         var jsonString = JSON.stringify(data, null, ' ');

         console.log(jsonString);
         _super(item, container)
     }


 });

CSS:

我使用HTML标记创建了以下JSFIDLE：

在小设备上，排序可以根据需要工作，但在大屏幕上不起作用-元素的位置计算错误

我怎样才能解决这个问题

编辑：我创建了一个更具可读性的JSFIDLE来演示这个问题：

---

问题是我在

li

上有

col-md-12

课程，正在排序。删除后，一切正常…

如果您在此处找不到答案，可以尝试将此问题发布到项目的github问题跟踪程序上：

.accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family:'Glyphicons Halflings';
    /* essential for enabling glyphicon */
    content:"\e114";
    /* adjust as needed, taken from bootstrap.css */
    float: right;
    /* adjust as needed */
    color: grey;
    /* adjust as needed */
    cursor: pointer;
}
.accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content:"\e080";
    /* adjust as needed, taken from bootstrap.css */
}
.timeline_name {
    height: 40px!important;
    font-weight: bold;
    font-size: 19px!important;
    width: 95%!important;
}
#timeline_list .accordion-toggle:after {
    margin-top: -30px;
}
.dragged {
    position: absolute;
    opacity: 0.5;
    z-index: 2000;
}
#timeline_list li.placeholder {
    position: relative;
    /** More li styles **/
}
#timeline_list li.placeholder:before {
    position: absolute;
    /** Define arrowhead **/
    content:"";
    width: 0;
    height: 0;
    margin-top: -5px;
    left: -5px;
    top: -4px;
    border: 5px solid transparent;
    border-left-color: red;
    border-right: none;
}
#events ul, #events li, #timeline li {
    text-decoration: none;
    list-style-type: none!important;
}