Bootstarp 4 - как изменить порядок столбцов в разных строках для мобильного

Question

Мне нужно сделать другой заказ на bootstrap кол для мобильного. Я обнаружил много вопросов о переполнении стека при обновлении этой топики c, но я не увидел ни одной топи c, связанной с изменением порядка столбцов в разных строках.

<div class="row d-flex justify-content-around mb-5">
  <div id="selectProductCol" class="col-sm-12 col-lg-5">
    <div class="d-flex flex-column">
      <div class="d-flex justify-content-between">
        <mat-placeholder class="placeholder mr-3 mb-1">בחר סוג מוצר</mat-placeholder>
        <span class="ml-3" matSuffix matTooltip="סוג מוצר" matTooltipPosition='right'>
                                        </span>
      </div>
    </div>
  </div>

  <div id="selectCashierCol" class="col-sm-12 col-lg-5 order-first order-md-last">
    <div [@fade]="products.length > 0 ? 'active' : 'inactive'">
      <div class="d-flex flex-column">
        <div class="d-flex justify-content-between">
          <mat-placeholder class="placeholder mr-3 mb-1">בחר קופה</mat-placeholder>
          <span class="ml-3" matSuffix matTooltip="שם הקופה" matTooltipPosition="right">
                                            </span>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row d-flex justify-content-around mb-5">
  <div id="selectInsuranceCol" class="col-sm-12 col-lg-5" [@fade]="companies.length > 0 ? 'active' : 'inactive'">
    <div class="d-flex justify-content-between">
      <mat-placeholder class="placeholder mr-3 mb-1">בחר חברת ביטוח</mat-placeholder>
      <span class="ml-3" matSuffix matTooltip="שם חברת הביטוח" matTooltipPosition='right'>
                                    </span>
    </div>
  </div>

  <div id="addImageCol" class="col-sm-12 col-lg-5 text-center align-self-center">
    <div *ngIf="policyForm.get('firstPage.productType').value?.type !== 'executive' &&
                        policyForm.get('firstPage.productType').value?.type !== null ">
      <button mat-button type="button" id="uploadFileButton" class="form-upload-btn">
                                        <label>
                                            <input type="file" (change)="setFile($event.target)">
                                        </label>
                                    </button>
    </div>
  </div>
</div>

Мне нужно заменить порядок столбцов selectCashierCol и selectInsuranceCol на мобильном телефоне

Answer 1

Вы не можете изменить порядок столбцов в отдельных строках, потому что они не имеют общего родителя flexbox (строки). Решение состоит в том, чтобы поместить столбцы в один и тот же родительский элемент .row ...

  <div class="row d-flex justify-content-around mb-5">
        <div id="selectProductCol" class="col-sm-12 col-lg-5 pb-5">
            <div class="d-flex flex-column">
                <div class="d-flex justify-content-between">
                    <mat-placeholder class="placeholder mr-3 mb-1">בחר סוג מוצר</mat-placeholder>
                    <span class="ml-3" matSuffix matTooltip="סוג מוצר" matTooltipPosition='right'>
                    </span>
                </div>
            </div>
        </div>
        <div id="selectCashierCol" class="col-sm-12 col-lg-5 order-first order-md-last pb-5">
            <div [@fade]="products.length > 0 ? 'active' : 'inactive'">
                <div class="d-flex flex-column">
                    <div class="d-flex justify-content-between">
                        <mat-placeholder class="placeholder mr-3 mb-1">בחר קופה</mat-placeholder>
                        <span class="ml-3" matSuffix matTooltip="שם הקופה" matTooltipPosition="right">
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div id="selectInsuranceCol" class="col-sm-12 col-lg-5" [@fade]="companies.length > 0 ? 'active' : 'inactive'">
            <div class="d-flex justify-content-between">
                <mat-placeholder class="placeholder mr-3 mb-1">בחר חברת ביטוח</mat-placeholder>
                <span class="ml-3" matSuffix matTooltip="שם חברת הביטוח" matTooltipPosition='right'>
                </span>
            </div>
        </div>
        <div id="addImageCol" class="col-sm-12 col-lg-5 text-center align-self-center">
            <div *ngIf="policyForm.get('firstPage.productType').value?.type !== 'executive' &&
                        policyForm.get('firstPage.productType').value?.type !== null ">
                <button mat-button type="button" id="uploadFileButton" class="form-upload-btn">
                    <label>
                        <input type="file" (change)="setFile($event.target)">
                    </label>
                </button>
            </div>
        </div>
  </div>

https://codeply.com/p/n4mw1Vydsy

Answer 2

В соответствии с bootstrap системой гридов версии 4, у вас есть bootstrap класс "order- (здесь вы можете установить номер заказа от 1 до 12)", такой как order-2, что означает, что соответствующий div будет размещен на второй номер. По умолчанию значение порядка равно 0, поэтому, если вы не добавили ни одного класса заказа в указанный элемент c, он будет упорядочен в первую очередь. Вы также можете установить порядок по-разному для разных точек останова, например, если вы хотите, чтобы div был помещен в 1-й порядок в представлении на рабочем столе, но если вы хотите поместить его в последний раз в представлении для мобильных устройств, вы можете назначить ему два класса, например: order-lg-1 order-12.

Примечание: Этот класс заказа будет работать только с элементами div, имеющими класс столбца, он не будет работать для контейнеров родительской строки.

Для полной документации, пожалуйста, посетите сайт bootstrap: https://getbootstrap.com/docs/4.0/layout/grid/

Answer 3

Я думаю, что вы ищете только свойство порядка css. На MDN есть отличный пример этого. И самое интересное в том, что это встроено в саму CSS, поэтому, если вы не используете библиотеку bootstrap, вы все равно можете использовать это свойство. Действительно классные вещи!

https://developer.mozilla.org/en-US/docs/Web/CSS/order

Надеюсь, это поможет.