css - 将按钮按行分组，一个按钮间隔两行

Question

如何使用 Bootstrap(特别是 Bootstrap 4)对按钮进行分组，这样如果我有几行/几行按钮，其中一个按钮会同时占据两行？非常类似于计算器或键盘的数字键盘，其中 Enter 占据两行，例如:

[1] [2] [3] [E]
[  0  ] [.] [n]

我很确定有一种简单的方法可以做到这一点，但我找不到。

upd. After seeing the previous attempt of answer I better add a pic

Answer 1

试试这个:

<div class="row">
    <div class="col-9">
        <div class="row">
            <div class="col-4">
                 <button class="btn btn-primary btn-block">1</button>
            </div>
            <div class="col-4">
                 <button class="btn btn-primary btn-block">2</button>
            </div>
            <div class="col-4">
                 <button class="btn btn-primary btn-block">3</button>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-8">
                 <button class="btn btn-primary btn-block">0</button>
            </div>
            <div class="col-4">
                 <button class="btn btn-primary btn-block">.</button>
            </div>
        </div>
    </div>
    <div class="col-3">
        <button class="btn btn-primary btn-block">Enter</button>
    </div>
</div>

已更新