Cột bên phải Bootstrap trên đầu trên chế độ xem di động

Tôi có một trang Bootstrap như thế này:

<div class="row">
    <div class="col-md-6">
        A
    </div>
    <div class="col-md-6">
       B
    </div>
</div>

Giống như:

-----
|A|B|
-----

Vì vậy, nếu tôi nhìn vào thiết bị di động, Cột A ở trên cùng, nhưng tôi muốn B ở trên cùng. Điều này có thể không? Tôi đã thử nó với một cú kéo, nhưng nó không hoạt động.

Sử dụng thứ tự Cột để thực hiện điều này.

col-md-push-6sẽ "đẩy" cột sang bên phải 6 và col-md-pull-6sẽ "kéo" cột sang trái trên "md" hoặc các cổng xem lớn hơn. Trên bất kỳ cổng xem nhỏ hơn, các cột sẽ trở lại theo thứ tự bình thường.

Tôi nghĩ điều khiến mọi người thất vọng, đó là bạn phải đặt B lên trên A trong HTML của mình . Có thể có một cách khác để làm điều này khi A có thể vượt lên trên B trong HTML, nhưng tôi không chắc làm thế nào để làm điều đó ...

BẢN GIỚI THIỆU

<div class="row">
  <div class="col-md-6 col-md-push-6">B</div>
  <div class="col-md-6 col-md-pull-6">A</div>
</div>

cổng xem> = md

|A|B|

cổng xem <md

|B|
|A|

Điều đáng chú ý là nếu bạn đang sử dụng các cột không bằng 6, thì số lượng đẩy sẽ không bằng kích thước cột ban đầu.

Nếu bạn có 2 cột (A & B) và muốn cột A nhỏ hơn và ở bên phải trên khung nhìn "sm" hoặc lớn hơn, nhưng trên đỉnh khung nhìn di động (xs), bạn sẽ sử dụng như sau:

<div class="row">
    <div class="col-sm-4 col-sm-push-8">A</div>
    <div class="col-sm-8 col-sm-pull-4">B</div>
</div>

Nếu không, sự liên kết của các cột sẽ xuất hiện.

Hướng Flexbox

Đối với Bootstrap 4, hãy áp dụng một trong các cách sau cho div .row của bạn:

.flex-row-reverse

Đối với cài đặt đáp ứng:

.flex-sm-row-reverse
.flex-md-row-reverse
.flex-lg-row-reverse
.flex-xl-row-reverse

Các mã dưới đây làm việc cho tôi

.row {
    display: flex;
    flex-direction: column-reverse;
}

Trong Bootstrap 4, giả sử bạn muốn có một đơn hàng cho màn hình lớn và một đơn hàng khác cho màn hình nhỏ hơn:

<div class="container">
  <div class="row">
    <div class="col-6 order-1 order-lg-2">
      This column will be ordered second on large to extra large screens
    </div>
    <div class="col-6 order-2 order-lg-1">
      This column will be ordered first on large to extra large screens
    </div>
  </div>
</div>

Bạn có thể bỏ qua order-1và order-2ở trên. Chỉ cần thêm cho rõ ràng. Thứ tự mặc định sẽ là thứ tự các cột xuất hiện trong html.

Để biết thêm thông tin https://getbootstrap.com/docs/4.1/layout/grid/#reordering

Điều này hiện được thực hiện (trong Bootstrap v4) bằng cách thêm các lớp order- #.

Xem https://getbootstrap.com/docs/4.1/migration/#grid-system-1

Như thế này:

<div classname='col-md-8 order-2'>...</div>
<div classname='col-md-4 order-1'>...</div>

Tôi có ba cột bootstrap 4 kích cỡ khác nhau. Khi màn hình nhỏ hơn, cột thứ ba bị ẩn, sau đó khi màn hình nhỏ hơn và các div được xếp chồng, thứ tự sẽ thay đổi để cột 2 ở trên cùng.

    <div class="col-xs-12 col-sm-4 col-md-3 order-2 order-sm-1">
        <h3>LEFT HAND SECTION</h3>
        <p>For news, links photos or comments.</p>
    </div>
    <div class="col-xs-12 col-sm-8 col-md-5 order-1 order-sm-2">
        <h3>MAIN SECTION</h3>
        <p>The main content for the page.</p>
    </div>
    <div class="col-xs-12 col-md-4 d-none d-md-block order-last">
        <h3>BLANK SECTION</h3>
        <p>Will usually just be blank.</p>
    </div>

Tôi hi vọng cái này giúp được. Tôi thấy khó hiểu điều này nhưng cuối cùng đã đến đó với sự trợ giúp của chủ đề này, nhưng nó đã bị một chút và bỏ lỡ.

Điều này làm việc cho tôi trên Bootstrap 4:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 order-md-last">
      <%= render 'form'%>
    </div>
    <div class="col-md-8 order-md-first">
      CONTENT
    </div>
  </div>
</div>

Tôi đã sử dụng:

.row {
   display: flex;
   flex-direction: row-reverse;
}

Trong Bootstrap V4 (Phát hành ngày 18 tháng 1 năm 2018) Bạn có thể sử dụng Lớp sắp xếp lại. Thông tin ở đây dưới tab Sắp xếp lại.

https://getbootstrap.com/docs/4.0/layout/grid/

Bootstrap 4 bao gồm các lớp cho flex. Xem: https://getbootstrap.com/docs/4.3/layout/utilities-for-layout/

<div class="row flex-column-reverse flex-md-row">
    <div class="col-sm-10">
        Col 1
    </div>
    <div class="col-sm-2">
       Col 2
    </div>
</div>