如何在移动布局上更改Bootstrap 3列顺序？

Question

我正在使用顶部固定导航栏进行响应式布局.在下面我有两列,一个用于侧边栏(3),另一列用于内容(9).在桌面上看起来像这样

navbar
[3] [9]

当我resize移动时,navbar压缩和隐藏,然后侧边栏堆叠在内容的顶部,如下所示:

navbar
[3]
[9]

我想在顶部的主要内容,所以我需要将移动订单更改为:

navbar
[9]
[3]

我发现这篇文章涵盖了相同的观点,但已接受的答案已被编辑,表示该解决方案不适用于当前版本的Bootstrap.

如何在移动设备上重新排序这些列？或者,我怎样才能将sidbar list-group放入我的扩展导航栏？

这是我的代码:

<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-->

Answer 1

您无法在较小的屏幕中更改列的顺序,但您可以在大屏幕中执行此操作.

因此,请更改列的顺序.

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

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

默认情况下,它首先显示主要内容.

所以在移动主要内容中首先显示.

通过使用col-lg-push,col-lg-pull我们可以在大屏幕中重新排序列,并在左侧显示侧栏,在右侧显示主要内容.

在这里工作小提琴.

Answer 2

2018年更新

对于基于Bootstrap 3的原始问题,解决方案是使用推挽式.

在Bootstrap 4中,现在可以更改顺序,即使列是垂直全宽度堆叠的,这要归功于Bootstrap 4 flexbox.OFC,推拉方法仍然有效,但现在还有其他方法可以改变Bootstrap 4中的列顺序,从而可以重新排序全宽列.

方法1 - flex-column-reverse用于xs屏幕:

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

方法2 - order-first用于xs屏幕:

<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

原始3.x答案

对于基于Bootstrap 3的原始问题,解决方案是使用推拉来获得更大的宽度,然后列将显示它们在较小(xs)宽度上的自然顺序.(AB反向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说," 你不能在较小的屏幕上改变列的顺序,但你可以在大屏幕上做到这一点 ".但是,应该澄清这一点:"您无法在Bootstrap 3中更改全宽 "堆叠"列 ..." 的顺序.

Answer 3

这里的答案仅适用于2个单元格,但只要这些列中有更多单元格,就会导致更复杂的问题.我想我已经为多列中的任意数量的单元格找到了一个通用的解决方案.

目标

在移动设备上获取垂直标签序列,以按照设计在平板电脑/台式机上所要求的顺序排列自己.在这个具体的例子中,一个标签必须比通常更早地输入流量,而另一个标签必须比通常更早.

移动

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

平板+

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

因此标题需要在平板电脑上随机播放,技术上,desc也是如此 - 它位于移动设备之前的标题标签之上.你会在一瞬间看到4个标题也有问题.

让我们假设每个单元格的高度都有所不同,并且需要在下一个单元格中从上到下齐平(排除像桌子一样的弱技巧).

与所有Bootstrap网格问题一样,步骤1是在页面上实现HTML必须是移动顺序,1 2 3 4 5.然后,确定如何让平板电脑/桌面以这种方式重新排序 - 理想情况下没有Javascript.

获得1 headline和3 qty坐在右边而不是左边的解决方案就是简单地设置它们pull-right.这适用于CSS float: right,这意味着他们找到了第一个适合右侧的开放空间.你可以认为浏览器的CSS处理器按以下顺序工作:1适合右上角.2是下一个并且是常规(float: left),因此它会进入左上角.然后是3,这就是float: right它在1下方跳跃.

但这个解决方案还不够4 caption; 因为左侧的右侧2个单元太短2 image,往往比它们两个组合的长.Bootstrap Grid是一个美化的浮动黑客,意思4 caption 是float: left.由于2 image占据了左侧的大量空间,4 caption试图适应下一个可用空间 - 通常是右侧列,而不是我们想要的左侧.

这里的解决方案(更常见的是对于这样的任何问题)是添加一个隐藏在移动设备上的黑客标签,它存在于平板电脑+上以推出标题,然后被负边距覆盖 - 如下所示:

[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; }
}

所以,这里的通用解决方案是添加可以在移动设备上消失的hack标签.在平板电脑+上,黑客标签允许显示的标签在流程中更早或更晚出现,然后上拉或下拉以覆盖这些黑客标签.

注意:为了链接jsfiddle中的简单示例,我使用了固定高度,但我正在处理的实际网站内容在所有5个标记中的高度不同.它适当地呈现标签高度的相对较大的变化,尤其是图像和desc.

注意2:根据您的布局,您可能在平板电脑+(或更大的分辨率)上具有足够一致的列顺序,您可以避免使用黑客标签,margin-bottom而是使用,如下所示:

注3:这使用Bootstrap 3. Bootstrap 4使用不同的网格集,不适用于这些示例.

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

Answer 4

在Bootstrap 4 中，如果你想做这样的事情：

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

您需要颠倒B然后C的顺序然后应用order-{breakpoint}-first到B。并应用两种不同的设置，一种使它们共享相同的列，另一种使它们占据 12 列的全宽：

• 较小的屏幕：12 列到B和 12 列到C

• 更大的屏幕：它们的总和之间有 12 列（B + C = 12）

像这样

<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>

演示： https : //codepen.io/anon/pen/wXLGKa

Answer 5

2017年10月

我想添加另一个Bootstrap 4解决方案.一个对我有用的.

CSS"Order"属性与媒体查询结合使用,可以在列堆叠在较小的屏幕中时对列进行重新排序.

像这样的东西:

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

CodePen链接: https ://codepen.io/preston206/pen/EwrXqm

调整屏幕大小,您会看到列以不同的顺序堆叠.

我将这与原始海报的问题联系起来.使用CSS,可以定位导航栏,侧边栏和内容,然后在媒体查询中应用订单属性.