Как мне сохранить кнопку, которая находится слева от поля поиска, когда размер уменьшен?

Question

Это может быть очень простое решение, но я не знаю, как выразить это словами.Я пытаюсь заставить кнопку минус перейти под элемент, когда размер экрана уменьшен, но он просто следует естественному порядку.

И когда экран становится меньше.

IsЕсть ли способ получить кнопку минус в нижней части экрана, например, на мобильном устройстве?

                    <div class="form-group">
                        <label class="col-form-label col-form-label-lg">Boarded</label>
                        <div class="form-row">
                            <div class="col-sm-5">
                                <button type="button" class="btn btn-dark btn-number btn-lg btn-block"
                                    (click)="decreaseBoardedValueClicked()">-</button>
                            </div>
                            <div class="col-sm-2">
                                <input type="number" pattern="[0-9]*" inputmode="numeric"
                                    class="form-control form-control-lg input-group-text" name="boarded" min="0"
                                    [(ngModel)]="log.boarded" #logBoarded="ngModel" required>
                            </div>
                            <div class="col-sm-5">
                                <button type="button" class="btn btn-success btn-number btn-lg btn-block"
                                    (click)="increaseBoardedValueClicked()">+</button>
                            </div>
                        </div>
                        <div class="alert alert-warning" *ngIf="logBoarded.errors?.required && logBoarded.touched">
                            The number of passengers boarded is required.
                        </div>
                        <div class="alert alert-warning" *ngIf="logBoarded.errors?.pattern && logBoarded.touched">
                            Invalid input. It can only contain counting numbers.
                        </div>
                    </div>

Answer 1

Если вы используете bootstrap v4, тогда вы должны использовать bootstrap order classes для поддержания порядка ваших элементов.Вот живая демоверсия на ваш вопрос, также посмотрите в JSfiddle

Изменение порядка начальной загрузки

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="form-group">
  <label class="col-form-label col-form-label-lg">Boarded</label>
  <div class="form-row">

    <div class="col-md-2">
      <input type="number" pattern="[0-9]*" inputmode="numeric" class="form-control form-control-lg input-group-text" name="boarded" min="0" [(ngModel)]="log.boarded" #logBoarded="ngModel" required>
    </div>
    <div class="col-md-5">
      <button type="button" class="btn btn-success btn-number btn-lg btn-block" (click)="increaseBoardedValueClicked()">+</button>
    </div>
    <div class="col-md-5 order-md-first">
      <button type="button" class="btn btn-dark btn-number btn-lg btn-block" (click)="decreaseBoardedValueClicked()">-</button>
    </div>
  </div>
  <div class="alert alert-warning" *ngIf="logBoarded.errors?.required && logBoarded.touched">
    The number of passengers boarded is required.
  </div>
  <div class="alert alert-warning" *ngIf="logBoarded.errors?.pattern && logBoarded.touched">
    Invalid input. It can only contain counting numbers.
  </div>
</div>

Answer 2

добавлены col-sm-12 col-md-5 классы для кнопок и col-sm-12 col-md-2 классы для текстового поля.надеюсь, это поможет, спасибо

@media (min-width: 576px) {
  .form-row :nth-child(1){order:2}
  .form-row :nth-child(2){order:1}
  .form-row :nth-child(3){order:3}
}

@media (min-width: 768px) {
  .form-row :nth-child(1){order:1}
  .form-row :nth-child(2){order:2}
  .form-row :nth-child(3){order:3}
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="form-group">
                        <label class="col-form-label col-form-label-lg">Boarded</label>
                        <div class="form-row">
                            <div class="col-sm-12 col-md-5">
                                <button type="button" class="btn btn-dark btn-number btn-lg btn-block"
                                    (click)="decreaseBoardedValueClicked()">-</button>
                            </div>
                            <div class="col-sm-12 col-md-2">
                                <input type="number" pattern="[0-9]*" inputmode="numeric"
                                    class="form-control form-control-lg input-group-text" name="boarded" min="0"
                                    [(ngModel)]="log.boarded" #logBoarded="ngModel" required>
                            </div>
                            <div class="col-sm-12 col-md-5">
                                <button type="button" class="btn btn-success btn-number btn-lg btn-block"
                                    (click)="increaseBoardedValueClicked()">+</button>
                            </div>
                        </div>
                        <div class="alert alert-warning" *ngIf="logBoarded.errors?.required && logBoarded.touched">
                            The number of passengers boarded is required.
                        </div>
                        <div class="alert alert-warning" *ngIf="logBoarded.errors?.pattern && logBoarded.touched">
                            Invalid input. It can only contain counting numbers.
                        </div>
                    </div>