Javascript jQuery:onClick交换div位置并更改类

我有两个沙发（一个大的，另一个小的）。小分区中有一个按钮。

单击小分区中的按钮，我希望分区交换其位置，换句话说，大分区变小，小分区变大。我能够做到这一点，但在交换之后，我无法将按钮移动到更小的div

互换前

互换后

注意：我希望删除主面板右下角的按钮，并将其移动到位置面板的右下角

主面板

非常感谢您的帮助。
为什么要移动它？只需在每个div中放置一个按钮并将其隐藏在大div中。您想移动整个导航还是只移动按钮？你想把它们放在哪里？似乎是个好主意。“让我试试。”易卜拉欣·赫里尔只是按了一下按钮。我希望在较小div的右下角有一个按钮，而不是在较大div中。@suhasrivatssubburathinam您可以将div的位置与jQuery交换如下：为什么要移动它？只需在每个div中放置一个按钮并将其隐藏在大div中。您想移动整个导航还是只移动按钮？你想把它们放在哪里？似乎是个好主意。“让我试试。”易卜拉欣·赫里尔只是按了一下按钮。我希望在较小div的右下角有一个按钮，而不是在较大div中。@suhasrivatssubburathinam您可以将div位置与jQuery交换如下：
<div class="nav-tabs-custom" id="mainPanel">
    <!-- Tabs within a box -->
    <ul class="nav nav-tabs pull-right">
        <li class="active"><a href="#revenue-chart" data-toggle="tab">Area</a></li>
        <li><a href="#sales-chart" data-toggle="tab">Donut</a></li>
        <li class="pull-left header"><i class="fa fa-inbox"></i> Main Panel</li>
    </ul>
    <div class="tab-content no-padding">
        <!-- Morris chart - Sales -->
        <div class="chart tab-pane active" id="revenue-chart" style="position: relative; height: 300px;"></div>
        <div class="chart tab-pane" id="sales-chart" style="position: relative; height: 300px;"></div>
    </div>
    <ul class="nav nav-tabs pull-right">
        <li>
            <button class="btn btn-default pull-right click-me" type="submit">
            <span class="glyphicon glyphicon-resize-full" aria-hidden="true"></span>
            </button>
        </li>
    </ul>
</div>

<div class="box box-solid bg-light-blue-gradient" id="positionsPanel">
    <div class="box-header">
        <!-- tools box -->
        <div class="pull-right box-tools">
            <button type="button" class="btn btn-primary btn-sm daterange pull-right" data-toggle="tooltip" title="Date range">
            <i class="fa fa-calendar"></i></button>
            <button type="button" class="btn btn-primary btn-sm pull-right" data-widget="collapse" data-toggle="tooltip" title="Collapse" style="margin-right: 5px;">
            <i class="fa fa-minus"></i></button>
        </div>
        <!-- /. tools -->
        <i class="fa fa-map-marker"></i>
        <h3 class="box-title">
        Positions Panel
        </h3>
    </div>
    <div class="box-body">
        <div id="world-map" style="height: 250px; width: 100%;"></div>
    </div>
    <!-- /.box-body-->
    <div class="box-footer no-border">
        <div class="row">
            <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                <div id="sparkline-1"></div>
                <div class="knob-label">Visitors</div>
            </div>
            <!-- ./col -->
            <div class="col-xs-4 text-center" style="border-right: 1px solid #f4f4f4">
                <div id="sparkline-2"></div>
                <div class="knob-label">Online</div>
            </div>
            <!-- ./col -->
            <div class="col-xs-4 text-center">
                <div id="sparkline-3"></div>
                <div class="knob-label">Exists</div>
            </div>
            <!-- ./col -->
        </div>
        <!-- /.row -->
    </div>
</div>

// Making function calls
$(".click-me").click(function () {
    // $(this).removeClass('.click-me');
    $('#positionsPanel').addClass('.click-me');
    $("#mainPanel").swap($("#positionsPanel"));
});