jquery - アライメントを失う展開クリック

Question

私は次のように部門を持っています。

<div class="draggableParent">
    <div class="row" id="draggablePanelList">
        @if (Model.chartConfigDataList.Count > 0)
    {
        for (var i = 0; i < Model.chartConfigDataList.Count; i++)
        {
                <div class="col-md-4 col-sm-6 col-xs-12 mainCls" id="@ChartNameForResize">
                    <div class="x_panel">
                        <div class="x_title">
                            <h2 id="Header_ChartName">
                                @obj.chartDetail.ChartName
                            </h2>
                            @*CHART SETTINGS MENU*@
                            <ul class="nav navbar-right panel_toolbox">
                                <li><a class="printChart" title="Save Image"> <i class="glyphicon glyphicon-save"></i> </a> </li>
                                <li><a class="expand-link" title="Expand Chart" onclick="horizontalResize(@ChartNameForResize)"><i class="glyphicon glyphicon-resize-horizontal"></i></a></li>
                                @*<li><a class="TableView" title="View in Table" onclick="@LogChartname"> <i class="fa fa-table"></i> </a> </li>*@
                                <li><a class="chart-info-link" title="Chart Info"><i class="fa fa-info"></i></a></li>
                                <li><a class="collapse-link" title="Collapse"><i class="fa fa-chevron-up"></i></a></li>
                            </ul>
                        </div>
                        <div class="x_content">
                            <div>
                                @{ Html.RenderAction(@obj.ChartView, "DA_CPC", new { ChartType = @obj.ChartType });}
                            </div>
                        </div>
                    </div>
                    <input id="ChartID_Hidden" type="hidden" value="@obj.chartDetail.ChartID" data-parentId="@obj.chartDetail.ParentID" />
                </div>
        }
    }
    </div>
</div>

私のJqueryコードは次のとおりです。

jQuery(function ($) {
    var panelList2 = $('#draggablePanelList');

    panelList2.sortable({

        handle: '.x_title',
        opacity: 0.4,
        cursor: 'move',
       // scroll: false,
        containment: ".draggableParent",
        forceHelperSize: true,
        revert: 'true',
        update: function () {
            $('.mainCls', panelList2).each(function (index, elem) {
                var $listItem = $(elem),
                 newIndex = $listItem.index();
            });
        }
    });
});

私のdiv内には、下の画像に示すように折りたたみリンクがあります:

上記の位置合わせは問題ありません。しかし、最初のチャート リンクの展開ボタンをクリックすると、すべてのチャートが左にシフトします。

しかし、最後のグラフの展開ボタンを展開すると、後続のすべてのグラフが下に移動します。 最初の 2 つの展開ボタンを 3 番目の展開ボタンと同じようにするには どうすればよいですか<div><div>