Tôi đang thực hiện một bố cục đáp ứng với một thanh điều hướng cố định hàng đầu. Bên dưới tôi có hai cột, một cho thanh bên (3) và một cho nội dung (9). Mà trên máy tính để bàn trông như thế này

thanh điều hướng
[3] [9]

Khi tôi resizevào thiết bị di động, navbarnó được nén và ẩn đi, sau đó thanh bên được xếp chồng lên trên cùng của nội dung, như thế này:

thanh điều hướng
[3]
[9]

Tôi muốn nội dung chính ở trên cùng, vì vậy tôi cần thay đổi thứ tự trên thiết bị di động này:

thanh điều hướng
[9]
[3]

Tôi thấy bài viết này bao gồm những điểm giống nhau, nhưng câu trả lời được chấp nhận đã được chỉnh sửa để nói rằng giải pháp không áp dụng cho phiên bản Bootstrap hiện tại.

Làm cách nào để sắp xếp lại các cột này trên thiết bị di động? Hoặc cách khác, làm cách nào tôi có thể đưa nhóm danh sách sidbar vào thanh điều hướng mở rộng của mình?

Đây là mã của tôi:

<div class="navbar navbar-inverse navbar-static-top">
  <div class="container">
    <a href="#" class="navbar-brand">Brand Title</a>
    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="collapse navbar-collapse navHeaderCollapse">

    <ul class="nav navbar-nav navbar-right"><!--original navbar-->
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>

    </div>
  </div>
</div><!--End Navbar Div-->
    <div class="container">
  <div class="row">

    <div class="col-lg-3">
  <div class="list-group">
    <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">Lorem ipsum</h4>
    <p class="list-group-item-text">Lorem Ipsum is simply dummy text.</p></a>
  </div>
</div><!--end sidebar-->


<div class="col-lg-9">
  <div class="panel panel-default">
    <div class="panel-body">
      <div class="page-header">
     Main Content
    </div>
  </div>
</div><!--end main content area-->

Bạn không thể thay đổi thứ tự các cột trong màn hình nhỏ hơn nhưng bạn có thể làm điều đó trong màn hình lớn.

Vì vậy, thay đổi thứ tự các cột của bạn.

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

Theo mặc định, điều này sẽ hiển thị nội dung chính đầu tiên.

Vì vậy, trong nội dung chính di động được hiển thị đầu tiên.

Bằng cách sử dụng col-lg-pushvà col-lg-pullchúng ta có thể sắp xếp lại các cột trong màn hình lớn và hiển thị thanh bên ở bên trái và nội dung chính ở bên phải.

Fiddle làm việc ở đây .

Cập nhật 2018

Đối với câu hỏi ban đầu dựa trên Bootstrap 3 , giải pháp là sử dụng kéo đẩy .

Trong Bootstrap 4 giờ đây có thể thay đổi thứ tự, ngay cả khi các cột được xếp chồng toàn chiều rộng theo chiều dọc, nhờ vào hộp flexst Bootstrap 4. OFC, phương pháp kéo đẩy vẫn sẽ hoạt động, nhưng bây giờ có nhiều cách khác để thay đổi thứ tự cột trong Bootstrap 4, cho phép sắp xếp lại các cột có chiều rộng đầy đủ.

Phương pháp 1 - Sử dụng flex-column-reversecho xsmàn hình:

<div class="row flex-column-reverse flex-md-row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9">
        main
    </div>
</div>

Phương pháp 2 - Sử dụng order-firstcho xsmàn hình:

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

Bootstrap 4 (alpha 6): http://www.codeply.com/go/bBMOsvtJhD
Bootstrap 4.1: https://www.codeply.com/go/e0v77yGtcr

Bản gốc 3.x Trả lời

Đối với câu hỏi ban đầu dựa trên Bootstrap 3 , giải pháp là sử dụng kéo đẩy cho chiều rộng lớn hơn và sau đó các cột sẽ hiển thị là thứ tự tự nhiên của chúng trên chiều rộng (xs) nhỏ hơn. (AB ngược lại BA).

<div class="container">
    <div class="row">
        <div class="col-md-9 col-md-push-3">
            main
        </div>
        <div class="col-md-3 col-md-pull-9">
            sidebar
        </div>
    </div>
</div>

Bootstrap 3: http://www.codeply.com/go/wgzJXs3gel

@emre tuyên bố: " Bạn không thể thay đổi thứ tự các cột trong màn hình nhỏ hơn nhưng bạn có thể làm điều đó trong màn hình lớn ". Tuy nhiên, điều này cần được làm rõ: "Bạn không thể thay đổi thứ tự các cột" xếp chồng " toàn chiều rộng .." trong Bootstrap 3.

Các câu trả lời ở đây chỉ hoạt động cho 2 ô, nhưng ngay khi các cột đó có nhiều hơn trong đó, nó có thể dẫn đến sự phức tạp hơn một chút. Tôi nghĩ rằng tôi đã tìm thấy một giải pháp tổng quát cho bất kỳ số lượng ô nào trong nhiều cột.

Bàn thắng

Nhận một chuỗi các thẻ dọc trên thiết bị di động để tự sắp xếp theo bất kỳ thứ tự nào mà thiết kế yêu cầu trên máy tính bảng / máy tính để bàn. Trong ví dụ cụ thể này, một thẻ phải nhập luồng sớm hơn bình thường và một thẻ khác muộn hơn bình thường.

Di động

[1 headline]
[2 image]
[3 qty]
[4 caption]
[5 desc]

Máy tính bảng +

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][5 desc    ]
[4 caption][          ]
[         ][          ]

Vì vậy, tiêu đề cần xáo trộn ngay trên máy tính bảng +, và về mặt kỹ thuật, cũng như vậy - nó nằm phía trên thẻ chú thích trước nó trên thiết bị di động. Bạn sẽ thấy trong một khoảnh khắc 4 chú thích cũng gặp rắc rối.

Giả sử mọi ô có thể khác nhau về chiều cao và cần phải được lật từ trên xuống dưới với ô tiếp theo của nó (loại trừ các thủ thuật yếu như bảng).

Như với tất cả các vấn đề của Bootstrap Grid, bước 1 là nhận ra HTML phải theo thứ tự di động, 1 2 3 4 5, trên trang. Sau đó, xác định cách để máy tính bảng / máy tính để bàn tự sắp xếp lại theo cách này - lý tưởng nhất là không có Javascript.

Giải pháp để có được 1 headlinevà 3 qtyngồi bên phải chứ không phải bên trái là chỉ cần đặt cả hai pull-right. Điều này áp dụng CSS float: right, nghĩa là họ tìm thấy không gian mở đầu tiên mà họ sẽ phù hợp với bên phải. Bạn có thể nghĩ bộ xử lý CSS của trình duyệt hoạt động theo thứ tự sau: 1 khớp với góc trên bên phải. 2 là tiếp theo và là thường xuyên ( float: left), vì vậy nó đi đến góc trên cùng bên trái. Sau đó 3, đó làfloat: right vì vậy nó nhảy qua bên dưới 1.

Nhưng giải pháp này không đủ cho 4 caption; bởi vì 2 ô bên phải quá ngắn 2 imageở bên trái có xu hướng dài hơn cả hai ô được kết hợp. Bootstrap Grid là một bản hack nổi được tôn vinh, có nghĩa 4 caption là float: left. Với việc 2 imagechiếm quá nhiều phòng bên trái,4 caption cố gắng để phù hợp với không gian có sẵn tiếp theo - thường là cột bên phải, không phải bên trái nơi chúng tôi muốn.

Giải pháp ở đây (và nói chung hơn cho bất kỳ vấn đề nào như thế này) là thêm thẻ hack, ẩn trên thiết bị di động, tồn tại trên máy tính bảng + để đẩy chú thích ra, sau đó được bao phủ bởi một lề âm - như thế này:

[2 image  ][1 headline]
[         ][3 qty     ]
[         ][4 hack    ]
[5 caption][6 desc ^^^]
[         ][          ]

http://jsfiddle.net/b9chris/52VtD/16633/

HTML:

<div id=headline class="col-xs-12 col-sm-6 pull-right">Product Headline</div>
<div id=image class="col-xs-12 col-sm-6">Product Image</div>
<div id=qty class="col-xs-12 col-sm-6 pull-right">Qty, Add to cart</div>
<div id=hack class="hidden-xs col-sm-6">Hack</div>
<div id=caption class="col-xs-12 col-sm-6">Product image caption</div>
<div id=desc class="col-xs-12 col-sm-6 pull-right">Product description</div>

CSS:

#hack { height: 50px; }

@media (min-width: @screen-sm) {
    #desc { margin-top: -50px; }
}

Vì vậy, giải pháp tổng quát ở đây là thêm các thẻ hack có thể biến mất trên thiết bị di động. Trên máy tính bảng + các thẻ hack cho phép các thẻ được hiển thị xuất hiện sớm hơn hoặc muộn hơn trong luồng, sau đó được kéo lên hoặc xuống để che các thẻ hack đó.

Lưu ý: Tôi đã sử dụng chiều cao cố định vì ví dụ đơn giản trong jsfiddle được liên kết, nhưng nội dung trang web thực tế tôi đang làm việc khác nhau về chiều cao trong tất cả 5 thẻ. Nó hiển thị đúng với phương sai tương đối lớn về chiều cao thẻ, đặc biệt là hình ảnh và desc.

Lưu ý 2: Tùy thuộc vào bố cục của bạn, bạn có thể có thứ tự cột đủ nhất quán trên máy tính bảng + (hoặc độ phân giải lớn hơn), mà bạn có thể tránh sử dụng thẻ hack, margin-bottomthay vào đó, như vậy:

Lưu ý 3: Điều này sử dụng Bootstrap 3. Bootstrap 4 sử dụng một bộ lưới khác và sẽ không hoạt động với các ví dụ này.

http://jsfiddle.net/b9chris/52VtD/16632/

Tháng 10 năm 2017

Tôi muốn thêm một giải pháp Bootstrap 4 khác. Một trong đó làm việc cho tôi.

Thuộc tính "Đặt hàng" CSS, kết hợp với truy vấn phương tiện, có thể được sử dụng để sắp xếp lại các cột khi chúng được xếp chồng lên nhau trong các màn hình nhỏ hơ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

Điều chỉnh kích thước màn hình và bạn sẽ thấy các cột được xếp theo thứ tự khác.

Tôi sẽ kết hợp điều này với câu hỏi của người gửi ban đầu. Với CSS, thanh điều hướng, thanh bên và nội dung có thể được nhắm mục tiêu và sau đó đặt hàng các thuộc tính được áp dụng trong truy vấn phương tiện.

Trong Bootstrap 4 , nếu bạn muốn làm một cái gì đó như thế này:

    Mobile  |   Desktop
-----------------------------
    A       |       A
    C       |   B       C
    B       |       D
    D       |

Bạn cần phải đảo ngược thứ tự của B thì C sau đó áp dụng order-{breakpoint}-firstcho B . Và áp dụng hai cài đặt khác nhau, một cài đặt sẽ khiến chúng chia sẻ cùng một cols và một cài đặt khác sẽ khiến chúng có toàn bộ chiều rộng của 12 cols:

• Màn hình nhỏ hơn: 12 cols đến B và 12 cols đến C

• Màn hình lớn hơn: 12 cols giữa tổng của chúng ( B + C = 12)

Như thế này

<div class='row no-gutters'>
    <div class='col-12'>
        A
    </div>
    <div class='col-12'>
        <div class='row no-gutters'>
            <div class='col-12 col-md-6'>
                C
            </div>
            <div class='col-12 col-md-6 order-md-first'>
                B
            </div>
        </div>
    </div>
    <div class='col-12'>
        D
    </div>
</div>

Bản trình diễn: https://codepen.io/anon/pen/wXLGKa

Điều này khá dễ dàng với jQuery khi sử dụng insertAfter () hoặc insertB Before ().

<div class="left">content</div> <div class="right">sidebar</div>

<script>
$('.right').insertBefore('left');
</script>

Thật đơn giản

nếu bạn muốn đặt điều kiện o cho thiết bị di động, bạn có thể làm điều đó như thế này

<script>
  var $iW = $(window).innerWidth();
  if ($iW < 992){
     $('.right').insertBefore('.left');
  }else{
     $('.right').insertAfter('.left');
  }
</script>

ví dụ https://jsfiddle.net/w9n27k23/

Bắt đầu với phiên bản di động trước tiên, bạn có thể đạt được những gì bạn muốn, hầu hết thời gian.

Ví dụ ở đây:

http://jsbin.com/wulexiq/edit?html,css,output

<div class="container">
      <h1>PUSH - PULL Bootstrap demo</h1>
    <h2>Version 1:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 col-sm-push-3 green">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-push-3 gold">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-pull-9 red">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 2:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 yellow">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 blue">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-4 pink">
        IN MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

    <h2>Version 3:</h2>

    <div class="row">

      <div class="col-xs-12 col-sm-5 cyan">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN TOP ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-3 col-sm-push-4 orange">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-3 brown">
        IN THE MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW XS-SMALL SCREEN
      </div>

    </div>

    <h2>Version 4:</h2>
    <div class="row">

      <div class="col-xs-12 col-sm-4 col-sm-push-8 darkblue">
        TO THE RIGHT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> TOP ROW XS-SMALL SCREEN
      </div>

      <div class="col-xs-12 col-sm-4 beige">
        MIDDLE ON SMALL/MEDIUM/LARGE SCREEN
        <hr> MIDDLE ROW ON XS-SMALL
      </div>

      <div class="col-xs-12 col-sm-4 col-sm-pull-8 silver">
        TO THE LEFT ON SMALL/MEDIUM/LARGE SCREEN
        <hr> BOTTOM ROW ON XS-SMALL
      </div>

    </div>

  </div>