Bootstrap 3 僅在小屏幕上更改 div 順序

Question

做我的第一個響應式設計，這在 Bootstrap 3 中是可能的。改變這個

至

將順序從大屏幕上的 3 列布局更改為將徽標向左移動並僅在小屏幕上堆疊其他兩列。 如果可能的話，我想使用 Bootstrap 類（col-xs-6 col-md-4 等）來做到這一點，而不必以顯示/隱藏的方式復制內容。 我喜歡 bootstrap3 為大屏幕提供的網格布局，所以如果可以在小屏幕上整理布局，我寧願保留它。

Answer 1

演示： http : //jsbin.com/uZiKAha/1

帶編輯的演示： http : //jsbin.com/uZiKAha/1/edit

是的，這可以在沒有 JS 的情況下使用 BS3 嵌套和推/拉來完成，並且所有的浮點數都清除了：

 <div class="container">
  <div class="row">
   <div class="col-xs-6 col-sm-4 col-sm-push-4 boxlogo">
    LOGO
   </div>
   <div class="col-xs-6 col-sm-8">
    <div class="row">
     <div class="col-sm-6 col-sm-pull-6 boxb">
      B
     </div>
     <div class="col-sm-6 boxa">
      A
     </div>
    </div>
    <!--nested .row-->

   </div>
  </div>
 </div>

Answer 2

使用引導程序 3：

<div class="row row-fluid">
   <div class="col-md-6 col-md-push-6">
       <img src="some-image.png">
   </div>

   <div class="col-md-6 col-md-pull-6">
       <h1>Headline</h1>
       <p>Lorem ipsum text of doom</p>
   </div>
</div>

這是有效的，因為當有足夠的空間時，它們首先會漂浮到原來的位置。 但是，當大小為中等並且空間丟失時，它們會堆疊，因為它們不能相互漂浮。 請注意，雖然我對兩者都使用了 6 列，但即使它們不是 6 列，這也有效。

這是鏈接： http : //ageekandhisblog.com/bootstrap-3-change-stacking-order/

Answer 3

通常，您希望對堆疊的元素進行分組，但在您的情況下， B和A無法分組，因為在一種情況下需要在它們之間插入Logo 。 你有兩個選擇

不使用 JS，我認為這將是您最好的選擇。 在這里擺弄

<div class="container">
    <div class="logo col-sm-4 col-xs-6 col-sm-push-4">Logo<br/>Logo</div>
    <div class="contentB col-sm-4 col-xs-6 col-sm-pull-4">B</div>
    <div class="contentA col-sm-4 col-xs-6 col-xs-offset-6 col-sm-offset-0">A</div>
</div>

這個想法是在 xs 的情況下使用行的翻轉屬性將A向下推。 我還使用推/拉類來重新排列 sm 案例中的 div。 然而，這里的問題是如果Logo比B高。 由於所有內容都在同一個網格上，因此A與較大元素的底部對齊，在Logo和B之間為我們提供了空白。 對於純 Bootstrap CSS，這確實沒有任何解決方案。 （也許有人可以糾正我）

相反，我建議您在調整窗口大小時使用 JS 來移動 div。 在這里擺弄

<div class="container">
    <div id="column1" class="row col-xs-6 col-sm-8">
        <div id="B" class="col-xs-12 col-sm-6">B</div>
        <div id="logo" class="col-xs-12 col-sm-6">Logo<br/>Logo</div>
    </div>
    <div id="column2" class="row col-xs-6 col-sm-4">
        <div id="A" class="col-xs-12 col-sm-12 ">A</div>
    </div>
</div>

和 JS

$(function() {
    $(window).resize(function() {
        var w = $(window).width();
        if (w < 768 && $('#column1').children().length > 1) {
            $('#B').prependTo( $('#column2') );
        } else if (w > 768 && $('#column2').children().length > 1) {
            $('#B').prependTo( $('#column1') );
        }
    });
});

編輯：有關推/拉/偏移類的信息，請參考引導網格文檔。

Answer 4

我設法通過使用 jQuery 交換列內容來解決此問題，這是標記：

<div class="container">
    <div class="row">
        <div class="col-sm-4 swap-col">
            columns 1
        </div>

        <div class="col-sm-4 swap-col">
            columns 2
        </div>

        <div class="col-sm-4 swap-col">
            columns 3
        </div>
    </div>
 </div>

這是 jQuery 腳本：

$(document).ready(function(){

    var col1_data,col2_data;

    col1_data = $(".footer-col:nth-child(1)").html();
    col2_data = $(".footer-col:nth-child(2)").html();

    var w = $(window).width();        

    if (w < 768)
    swap_columns();

    function swap_columns()
    {
        var w = $(window).width();
        if (w < 768)
        {
            $(".footer-col:nth-child(2)").html(col1_data);
            $(".footer-col:nth-child(1)").html(col2_data);
        }
        else
        {
            $(".footer-col:nth-child(1)").html(col1_data);
            $(".footer-col:nth-child(2)").html(col2_data);
        }
    }


    $(window).resize(function() {
        swap_columns();
    });
});

我希望它有幫助。

Answer 5

我制作了一個小的 jQuery 腳本，您可以使用它來獲得所需的結果。 基本上它只是檢測移動視口，然后根據它們的 col-class 重新排序 div：

let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

if (isMobile) {
    var colArray = []; // Make an array of all your columns
    $('.column').each(function () { // Select all the desired columns based on a custom class selector

        if ($(this).hasClass('col-md-6')) { // <--- Change your conditions here
            colArray.unshift($(this));  // if condition is met, the column will be placed as the first element in the array, in my case all my col-md-6's
        } else {
            colArray.push($(this));
        };
    });

    //Now you have an array of the columns, ordered by your conditions
    for (var i = 0, l = colArray.length; i < l; i++) {
        //Just just iterate through the array, and insert each div before the next
        colArray[i].insertBefore(colArray[i+1]);
    }
}

Answer 6

不是一個完整的答案，但您可以在這里找到有關 bootstrap3 響應類的信息

響應式 Bootstrap3 css