Jquery 如何在Bootstrap v4中创建两个相邻的表，并在它们之间使用垂直按钮

我正在使用Asp.NETMVC开发调查应用程序。在BootstrapV4中，我有两个相邻的表，它们之间有垂直按钮组。按钮组有两个按钮，用于将选定行从左向右或从右向左移动。但是我不能把它们放好。我对这张桌子有问题。有时右表在左表下方移动。我想彼此亲近。这是我犯错误时的设计

<div class="row flex-row">
    <div class="col form-group">
        <table id="leftTable" class="table table-striped table-bordered accent-blue table-responsive ">
            <thead>
            <tr>
                <th>Soru No</th>
                <th>Soru Adı</th>
            </tr>
            </thead>
        </table>
    </div>

    <div class="col-md-1 flex-col">
        <div class="btn-group-vertical">
            <a class="btn btn-primary" id="btnRight" style="margin-bottom: 3px"><i class="fa fa-chevron-right"></i>Soru Ekle</a>
            <a class="btn btn-primary" id="btnLeft"><i class="fa fa-chevron-left"></i>Soru Sil</a>
        </div>
    </div>

    <div class="col form-group">
        <table id="rightTable" class="table table-striped table-bordered accent-blue table-responsive">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Soru No</th>
                    <th>Soru Adı</th>

                </tr>
            </thead>
        </table>
    </div>
    <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
</div>

索鲁诺
索鲁阿德
由于引导是有响应的，所以在移动视图中，行中的第三列（右表）肯定会移动到第二列（btn组垂直）下。所有类名为“col”的div将占用12列宽。因此，它们是在彼此的下面

如果希望两个表彼此靠近，无论视图端口如何，请使用以下代码

<div class="row">
    <div class="col-4">
        <!--Left table code-->
    </div>
    <div class="col-4">
        <!--Button code-->
    </div>
    <div class="col-4">
        <!--Right table code-->
    </div>
</div>

这应该可以解决您的问题



谢谢您的回复，但我没有工作。按钮组占据了三分之一的空间，这在屏幕上看起来并不好看。我想要的是，中间列的宽度只占按钮宽度的宽度。我想把剩下的部分分成两个相等的部分，然后分配到表中。
我的问题解决了。但是“datatable”的搜索框发生了变化。你看