Bootstrap 4 - 如何更改移动设备不同行中的列顺序

Question

我需要为移动设备的 bootstrap col 制定不同的订单。我发现许多堆栈溢出问题重新分级了这个主题，但我没有看到任何与更改不同行上的列的顺序相关的主题。

<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 cols的顺序

Answer 1

我认为您正在寻找的只是 css order 属性。 MDN 上有一个很好的例子。最酷的部分是它内置在 CSS 本身中，所以如果你最终不使用引导库，你仍然可以使用这个属性。真的很酷的东西！

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

我希望这会有所帮助。

Answer 2

根据引导版本 4 的网格系统，你有一个引导类“order-（在这里你可以设置从 1 到 12 的订单号）”，如 order-2，这意味着相应的 div 将被放置在第二个数字上。 order 的默认值是 0，所以如果你没有在特定的 div 中添加任何 order 类，那么它将首先被排序。 您还可以为不同的断点设置不同的顺序，例如，如果您希望将 div 在桌面视图中放置在第一顺序，但在移动视图中应放置在最后，您可以为它分配两个类，如下所示： order-lg-1 order-12。

注意：此订单类仅适用于具有列类的 div，不适用于父行容器。

如需完整文档，请访问 bootstrap 网站：https://getbootstrap.com/docs/4.0/layout/grid/

Answer 3

您不能更改不同行中列的顺序，因为它们不共享同一个 flexbox 父级（行）。解决方案是将列放在 same 父 .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