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

时间：2013-11-24 05:23:08

标签： html css twitter-bootstrap multiple-columns

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

  

导航栏
  [3] [9]

当resize移动navbar时，<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--> 被压缩并隐藏，然后侧边栏堆叠在内容的顶部，如下所示：

  

导航栏
  [3]
  [9]

我希望主要内容位于顶部，因此我需要将移动设备上的订单更改为：

  

导航栏
  [9]
  [3]

我发现this article涵盖了相同的观点，但已接受的答案已被编辑，表示解决方案不适用于当前版本的Bootstrap。

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

这是我的代码：

{{1}}

7 个答案:

答案 0 :(得分：446)

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

因此，请更改列的顺序。

<!--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，我们可以对大屏幕中的列进行重新排序，并在左侧显示侧边栏，在右侧显示主要内容。

工作fiddle here。

答案 1 :(得分：52)

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 的原始问题，解决方案是使用push-pull 获取更大的宽度，然后是列将显示它们在较小（xs）宽度上的自然顺序。 （A-B与B-A相反）。

<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中更改 全宽”堆叠“列 ..”的顺序。

答案 2 :(得分：27)

此处的答案仅适用于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是一个美化的浮动hack，意思是4 caption是float: left。由于2 image占据了左侧的大量空间，4 caption会尝试适应下一个可用空间 - 通常是右侧列，而不是我们想要的左侧。

此处的解决方案（更常见的是针对此类问题）是添加一个隐藏在移动设备上的黑客标签，它存在于平板电脑+上以推送标题，然后被负边距覆盖 - 如下所示：< / p> 

[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个标记中的高度不同。它可以正确渲染标签高度的相对较大的变化，尤其是图像和描述。

注意2 ：根据您的布局，您可能在平板电脑+（或更大的分辨率）上拥有足够一致的列顺序，您可以使用margin-bottom来避免使用黑客标记，像这样：

注3：这使用Bootstrap 3. Bootstrap 4使用不同的网格集，并且不会使用这些示例。

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

答案 3 :(得分：5)

2017年10月

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

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

这样的事情：

if($result->num_rows > 0){ //read the data inside sql and display out

    while($row = $result->fetch_assoc()){

        echo "Name: ". $row['name']. "<br>". "Table No.: ". $row['table_no']. "<br>";
    }


}else{ // insert the data if inside sql have no data of table_no

    if($_SERVER['REQUEST_METHOD'] == "POST"){

        $value = $_POST['value'];
        $table = $_POST['table'];

    }

    $sql = "INSERT INTO testing (name, table_no) VALUES ('$value', '$table')";

    mysqli_query($conn, $sql);

}

?>


<form method="post" action="">
    <h2>C1</h2>
    <input type="hidden" value="c1" name="table">
    <input type="text" name="value">
    <input type="submit">

</form>

<form method="post" action="">
    <h2>C2</h2>
    <input type="hidden" value="c2" name="table">
    <input type="text" name="value">
    <input type="submit">

</form>

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

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

我将这与原始海报的问题联系起来。使用CSS，可以定位导航栏，侧边栏和内容，然后在媒体查询中对应用的属性进行排序。

答案 4 :(得分：4)

在 Bootstrap 4 中，如果您要执行以下操作：

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

您需要颠倒 B 的顺序，然后颠倒 C ，然后将order-{breakpoint}-first应用于 B 。并应用两种不同的设置，一种将使它们共享相同的列，而另一种将使它们采用12列的完整宽度：

  • 较小的屏幕： B 为12列，而 C

    • 为12列

  • 大屏幕：它们之间的总和为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

答案 5 :(得分：1)

首先从移动版开始，您可以在大多数情况下实现您想要的效果。

这里的例子：

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>

答案 6 :(得分：-1)

使用insertAfter（）或insertBefore（）时，jQuery非常容易。

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

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

那么简单

如果您想为移动设备设置条件，可以像这样设置

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

示例 https://jsfiddle.net/w9n27k23/

相关问题
最新问题