如何向上/向下移动单个手风琴html元素

Question

我从Bootstrap 4获得了多个手风琴。当我点击相应的箭头时，我想让一支手风琴向上/向下移动。我如何在JS或jQuery中解决这个问题？

<div class="card">
    <div class="card-header" role="tab" id="headingOne">
        <h3 class="mb-0">
            <a data-toggle="collapse" data-parent="#testchild" href="#section-1" aria-expanded="true" aria-controls="collapseOne">
                Disco Full Overview
            </a>
            <a href="#">
                <button class="btn btn-success pull-right">
                    <i class="mdi mdi-tooltip-edit"></i> Edit
                </button>
            </a>
            <button class="btn btn-link btn-sm pull-right">
                <i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
            </button>
            <button class="btn btn-link btn-sm pull-right">
                <i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
            </button>

        </h3>
    </div>
    <div id="section-1" class="collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="card-block">
            ...
        </div>
    </div>
</div>
<div class="card">
    <div class="card-header" role="tab" id="headingOne">
        <h3 class="mb-0">
            <a data-toggle="collapse" data-parent="#testchild" href="#section-2" aria-expanded="true" aria-controls="collapseOne">
                Disco Test
            </a>
            <a href="#">
                <button class="btn btn-success pull-right">
                    <i class="mdi mdi-tooltip-edit"></i> Edit
                </button>
            </a>
            <button class="btn btn-link btn-sm pull-right">
                <i class="mdi mdi-chevron-down" style="font-size: 21px"></i>
            </button>
            <button class="btn btn-link btn-sm pull-right">
                <i class="mdi mdi-chevron-up" style="font-size: 21px"></i>
            </button>

        </h3>
    </div>
    <div id="section-2" class="collapse" role="tabpanel" aria-labelledby="headingOne">
        <div class="card-block">
            ...
        </div>
    </div>
</div>

我已经设置了箭头键，但我不知道该怎么做。

编辑。 我发现了insertafter和insertbefore，但我不知道父母和孩子是如何工作的。因为向上/向下按钮是其他元素的孩子，我不知道如何处理整个手风琴。