Thứ tự các cột thông qua Bootstrap4

Tôi có 3 cột mà tôi muốn sắp xếp theo các cách khác nhau trên máy tính để bàn và thiết bị di động. Hiện tại, gird của tôi trông như thế này:

<div class="row">
  <div class="col-xs-3 col-md-6">
    1
  </div>
  <div class="col-xs-3 col-md-6">
    2
  </div>
  <div class="col-xs-6 col-md-12">
    3
  </div>
</div>

Trong giao diện di động, tôi muốn có kết quả sau:

1-3-2

Rất tiếc, tôi không biết cách giải quyết vấn đề này với các lớp .col-md-push-*và .col-md-pull-*trong Bootstrap 4.

2018 - Xem lại câu hỏi này với Bootstrap 4 mới nhất.

Các lớp đặt hàng đáp ứng bây giờ order-first, order-lastvà order-0-order-12

Các Bootstrap 4 push pull lớp bây giờ push-{viewport}-{units}và pull-{viewport}-{units}và xs-ghi vào đã bị xoá. Để có được bố cục 1-3-2 mong muốn trên điện thoại di động / xs sẽ là: Bản demo kéo đẩy Bootstrap 4 (Điều này chỉ hoạt động trước phiên bản beta 4.0)

Bootstrap 4.1+

Vì Bootstrap 4 là flexbox nên việc thay đổi thứ tự các cột rất dễ dàng. Đàn con có thể được sắp xếp theo thứ tự từ order-1đến order-12, chẳng hạn như order-md-12 order-2(lần cuối cùng md, lần thứ 2 xs) liên quan đến cha mẹ .row.

<div class="container">
    <div class="row">
        <div class="col-3 col-md-6">
            <div class="card card-body">1</div>
        </div>
        <div class="col-6 col-md-12 order-2 order-md-12">
            <div class="card card-body">3</div>
        </div>
        <div class="col-3 col-md-6 order-3">
            <div class="card card-body">2</div>
        </div>
    </div>
</div>

Demo: Thay đổi thứ tự bằng cách sử dụng order-*các lớp

Máy tính để bàn (màn hình lớn hơn):

Di động (màn hình nhỏ hơn):

Cũng có thể thay đổi thứ tự cột bằng cách sử dụng utils hướng flexbox ...

<div class="container">
    <div class="row flex-column-reverse flex-md-row">
        <div class="col-md-8">
            2
        </div>
        <div class="col-md-4">
            1st on mobile
        </div>
    </div>
</div>

Demo: Bootstrap 4.1 Thay đổi thứ tự với Hướng Flexbox

Bản demo demo phiên bản cũ hơn - bản demo alpha 6
- beta (3)

Xem thêm các bản demo đặt hàng Bootstrap 4.1+

ACB ABC

Điều này cũng có thể đạt được với thuộc tính CSS "Order" và một truy vấn phương tiện.

Một cái gì đó như thế này:

@media only screen and (max-width: 768px) {
    #first {
        order: 2;
    }
    #second {
        order: 4;
    }
    #third {
        order: 1;
    }
    #fourth {
        order: 3;
    }
}

Liên kết CodePen: https://codepen.io/preston206/pen/EwrXqm

thậm chí điều này sẽ hoạt động:

<div class="container">
            <div class="row">
                <div class="col-4 col-sm-4 col-md-6 order-1">
                    1
                </div>
                <div class="col-4 col-sm-4  col-md-6 order-3">
                    2
                </div>
                <div class="col-4 col-sm-4  col-md-12 order-2">
                    3
                </div>
            </div>
          </div>

Tôi đang sử dụng Bootstrap 3, vì vậy tôi không biết có cách nào dễ thực hiện hơn Bootstrap 4 không nhưng css này sẽ phù hợp với bạn:

.pull-right-xs {
    float: right;
}

@media (min-width: 768px) {
   .pull-right-xs {
      float: left;
   }
}

... và thêm lớp vào cột thứ hai:

<div class="row">
    <div class="col-xs-3 col-md-6">
        1
    </div>
    <div class="col-xs-3 col-md-6 pull-right-xs">
        2
    </div>
    <div class="col-xs-6 col-md-12">
        3
    </div>
</div>

BIÊN TẬP:

Ohh ... có vẻ như những gì tôi đã viết ở trên chính xác là a. pull-xs-right class trong Bootstrap 4: X Chỉ cần thêm nó vào cột thứ hai và nó sẽ hoạt động hoàn hảo.

Vì thứ tự cột không hoạt động trong Bootstrap 4 beta như được mô tả trong mã được cung cấp trong câu trả lời được xem lại ở trên, bạn sẽ cần sử dụng những thứ sau (như được chỉ ra trong bản demo thứ tự Flexbox codeply 4 - liên kết alpha / beta được cung cấp trong câu trả lời).

<div class="container">
<div class="row">
    <div class="col-3 col-md-6">
        <div class="card card-block">1</div>
    </div>
    <div class="col-6 col-md-12  flex-md-last">
        <div class="card card-block">3</div>
    </div>
    <div class="col-3 col-md-6 ">
        <div class="card card-block">2</div>
    </div>
</div>

Tuy nhiên, hãy lưu ý rằng "Bản trình diễn đặt hàng Flexbox - beta" chuyển đến cơ sở mã alpha và việc thay đổi cơ sở mã thành Beta (và chạy nó) dẫn đến các div hiển thị không chính xác trong một cột - nhưng điều đó có vẻ như là một vấn đề nghiêm trọng vì cắt và dán mã ra khỏi codeply hoạt động như mô tả.

Bạn có thể thực hiện hai vùng chứa khác nhau, một với thứ tự trên thiết bị di động và ẩn trên màn hình máy tính để bàn, một vùng chứa khác với thứ tự trên máy tính để bàn và ẩn trên màn hình di động