Bootstrap Z订单问题

Question

我正在实施一个简单的拖拽和放大器从左侧列表中删除到右侧列表。但是，拖动的项目隐藏在面板后面（在屏幕截图中），这是一种令人不愉快的用户体验。如果有帮助，我的浏览器是Chrome v35.0.1916.153。

知道如何解决这个问题吗？

编辑＃1：左侧和右侧的列表right位于同一行的单独列中

编辑＃2：添加了Html，CSS是原始的，未经修改的Bootstrap v3（最新版）：

    <div class="row">
        <div class="col-md-4">
            <ul id="component-list" class="list-group">
                <li class="list-group-item">A111</li>
                <li class="list-group-item">B111</li>
                <li class="list-group-item">C111</li>
                <li class="list-group-item">D111</li>
                <li class="list-group-item">E111</li>
            </ul>
        </div>
        <div class="col-md-8" >
            <div class="panel panel-default">
                <div class="panel-heading">Panel heading</div>
                <ul class="list-group">
                    <li class="list-group-item">Cras justo odio</li>
                    <li class="list-group-item">Dapibus ac facilisis in</li>
                    <li class="list-group-item">Morbi leo risus</li>
                    <li class="list-group-item">Porta ac consectetur ac</li>
                    <li class="list-group-item">Vestibulum at eros</li>
                </ul>
            </div>            
        </div>
    </div>