jQuery的排序，並且引導3 - 適用於小型設備，大型設備

Question

不工作我使用jQuery可排序（http://johnny.github.io/jquery-sortable/）和Bootstrap 3

我想在我的表格行進行排序，我想出了這個代碼：

$("#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：

.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; 
} 

我創建以下的jsfiddle，與HTML標記：

http://jsfiddle.net/9UA2B/

按照需要在小設備上進行排序，但在大屏幕上不起作用 - 元素的位置計算錯誤。

我該如何解決這個問題？

編輯：我創建了一個更具可讀性的jsfiddle來證明這個問題：

http://jsfiddle.net/9qsxZ/

Answer 1

問題是我在licol-md-12類，這是進行排序。刪除它後，一切工作正常...