Bootstrap 4：确保最后一列不跳到第二行

Question

我有以下html，它在我的页面上使用bootstrap 4

<div class="container">
    <div class="row">           
        <div class="col-xs-11" style="padding: 0 !important;">
            <input type="text" class="form-control" placeholder="Type your Message Here">
        </div>      
        <div class="col-xs-1" style="padding: 0 !important;">
            <button class="btn btn-small btn-primary">Send</button>
        </div>          
    </div>
</div>

当缩小我的chrome窗口以模拟小屏幕设备时，这会按预期呈现（参见下面的屏幕截图）

现在我也想迎合桌面网络浏览器。所以我按如下方式添加col-lg-11和col-lg-1类

<div class="container">
    <div class="row">           
        <div class="col-xs-11 col-lg-11" style="padding: 0 !important;">
            <input type="text" class="form-control" placeholder="Type your Message Here">
        </div>      
        <div class="col-xs-1 col-lg-1" style="padding: 0 !important;">
            <button class="btn btn-small btn-primary">Send</button>
        </div>          
    </div>
</div>

但是现在当我缩小镀铬时，按钮会跳到第二行。 （见下面的截图）

如何同时为桌面设备和小型设备保留一行？

Plunker：https://plnkr.co/edit/a9ZCCyTrS1wUcb4Gdbf4?p=preview