【问题标题】：Bootstrap 3 changing div order on small screens onlyBootstrap 3 仅在小屏幕上更改 div 顺序
【发布时间】：2013-12-19 00:25:12
【问题描述】：

做我的第一个响应式设计，在 Bootstrap 3 中是这样的。改变这个

到

从本质上将顺序从大屏幕上的 3 列布局更改为将徽标向左移动并仅在较小的屏幕上堆叠其他两列。如果可能的话，我想使用 Bootstrap 类（col-xs-6 col-md-4 等）来完成，而不必以显示/隐藏的方式复制内容。我喜欢 bootstrap3 为大屏幕提供的网格布局，所以如果可以在小屏幕上整理布局，我更愿意保留它。

【问题讨论】：

我使用纯 Bootstrap 3 在下面发布了答案。Bootstrap 内置了媒体查询，所以我不明白那部分。
如果我想在不同的断点设置样式，我需要将我的样式插入到@media 标签中......（你知道最大宽度：480px 等）。我只是想了解大多数人通常使用的 2 或 3 个断点。
Bootstrap 3 首先是移动设备，因此所有媒体尺寸共有的任何东西都会超出最小宽度，然后在您选择的最小宽度内，您可以放入更大的设备样式。开始一个新问题，标题为：How do I work with min-width media queries because the answer is kind of long for this comment box.
不，太好了，感谢您的帮助。

标签： css twitter-bootstrap sorting mobile

【解决方案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>

【讨论】：

+1 太好了！我从来没有真正尝试过将东西拉到一行之外，这将非常有用。
太棒了，这真是令人印象深刻。谢谢。
感谢您挽救了我的职业生涯！

【解决方案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/

【讨论】：

【解决方案3】：

一般来说，您希望对堆叠的元素进行分组，但在您的情况下，B 和 A 无法分组，因为在一种情况下需要在它们之间插入 Logo。你有两个选择

不使用 JS，我认为这将是您的最佳选择。 fiddle here

<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。 fiddle here

<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') );
        }
    });
});

编辑：参考引导程序grid docs 以获取有关推/拉/偏移类的信息。

【讨论】：

那个JS方案很棒！
实际上有一种方法可以使用正确的 BS3 语法来做到这一点，我发布了它。

【解决方案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();
    });
});

希望对你有帮助。

【讨论】：

【解决方案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]);
    }
}

【讨论】：

【解决方案6】：

不是一个完整的答案，但在这里您可以找到有关 bootstrap3 响应类的信息

Responsive Bootstrap3 css

【讨论】：