Bootstrap блок кнопок не работает на iphone

Question

Вот как я пытаюсь вставить кнопку в мой div, используя bootstrap btn-block

<div class="row">
    <div class="col-sm-4   w-50">
        <div class="btn-group" role="group" aria-label="Basic example">
            <button type="button" class="btn btn-secondary" (click)="decreaseTheQuantity()"><span class="glyphicon glyphicon-chevron-left"></span></button>
            <button type="button" class="btn btn-light">{{quantity}}</button>
            <button type="button" class="btn btn-secondary" (click)="increaseTheQuantity()"><span class="glyphicon glyphicon-chevron-right"></span></button>
        </div>
    </div>
    <div class="col-sm-8  w-50">
            <button class="btn btn-success btn-block"   (click)="submitProductToACart()">Hinzufügen</button>
    </div>
</div>

В инструменте Chrome dev это будет показано следующим образом.

На телефоне (Safari и chrome) это так

Кроме классов Bootstraps я не использую классы css. Я хочу выровнять его вправо, как показано на первом рисунке. Я не уверен, как я могу это исправить или воссоздать это локально. Любые указатели будут высоко оценены. Спасибо

**** Обновление *****

В DEV Tools я пробовал разные разрешения там, я вижу, что он выровнен правильно.