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

Answer 1

我想你要找的只是 css 订单属性。 MDN 上有一个很好的例子。很酷的部分是它内置于 CSS 本身，所以如果你最终不使用 bootstrap 库，你仍然可以使用这个属性。真的很酷！

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

希望对您有所帮助。

Answer 2

根据 bootstrap 版本 4 的网格系统，你有一个 bootstrap class "order-(here you can set the order number from 1 to 12)" 像 order-2 这意味着相应的 div 将是放在第二个号码上。 order 的默认值为 0，因此如果您没有将任何顺序 class 添加到特定的 div，那么它将首先被排序。您还可以为不同的断点设置不同的顺序，例如如果您希望 div 在桌面视图中放在第一个顺序，但应该放在移动视图中的最后一个，您可以分配两个 classes 到它是这样的：order-lg-1 order-12.

注意：这个顺序class只适用于divs有列class，它不适用于父行容器.

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

Answer 3

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

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

Bootstarp 4 - how to change order of cols in different rows for mobile

css

mobile

responsive-design

twitter-bootstrap

bootstrap-4