我如何在移动布局上改变引导3列顺序?

我正在制作一个顶部固定导航条的响应式布局。下面有两列，一列是边栏(3)，一列是内容(9)，在桌面上看起来是这样的

导航条 [3] [9]

当我调整大小移动导航栏被压缩和隐藏，然后边栏堆叠在内容的顶部，就像这样:

navbar [3] [9]

我想在顶部的主要内容，所以我需要改变移动的顺序为:

navbar [9] [3]

我发现这篇文章涵盖了同样的观点，但公认的答案已被编辑，说解决方案不适用于当前版本的Bootstrap。

如何在移动设备上重新排序这些列?或者，我如何能得到边栏列表组到我的扩展导航栏?

这是我的代码:

当前回答

首先从手机版本开始，你可以在大多数情况下实现你想要的。

例子:

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>

2017-03-27 12:48:12

其他回答

这很容易用jQuery使用insertAfter()或insertBefore():

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

< >脚本 $(“铃声”).insertBefore(左); > < /脚本

如果你想为移动设备设置一个条件，你可以这样做:

< >脚本 var $iW = $(window).innerWidth(); if ($iW < 992){ $(“铃声”).insertBefore(“.left”); 其他}{ $(“铃声”).insertAfter(“.left”); ｝ > < /脚本

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

2015-05-30 10:03:49

首先从手机版本开始，你可以在大多数情况下实现你想要的。

例子:

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>

2017-03-27 12:48:12

引导3答案

这里的答案只适用于2个单元格，但一旦这些列中有更多的单元格，就会导致稍微复杂一些。我认为我已经找到了一个适用于多列任意数量单元格的通用解。

目标

在移动设备上获得标签的垂直序列，以平板电脑/台式机上的设计要求的任何顺序排列自己。在这个具体的例子中，一个标记必须比正常情况下更早进入flow，而另一个必须比正常情况下更晚进入flow。

移动

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

平板电脑+。

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

因此，在平板电脑+上，标题需要右移，从技术上讲，desc也是如此——它位于移动设备上的标题标签之上。你马上就会看到4个标题也有麻烦了。

让我们假设每个单元格的高度不同，并且需要与下一个单元格从上到下保持齐平(排除了像桌子这样的弱技巧)。

与所有的Bootstrap Grid问题一样，第一步是要意识到HTML必须在页面上按移动顺序排列，1 2 3 4 5。然后，确定如何让平板电脑/台式机以这种方式重新排序-理想情况下不需要Javascript。

要让1个标题和3个数量坐在右边而不是左边，解决方案是简单地将它们都设置为右拉。这应用了CSS float: right，这意味着它们找到了第一个适合右边的开放空间。您可以认为浏览器的CSS处理器是按照以下顺序工作的:1适合右上角。2是下一个，是常规的(float: left)，所以它会到左上角。然后是3，也就是浮点数，所以它从1下面跳过去。

但这个解决方案还不足以满足4个标题;因为右边的两个单元格太短了，左边的两个图像往往比它们加起来还要长。Bootstrap Grid是一个光荣的浮动hack，意味着4标题是浮动:左。左边有2张图片占据了这么大的空间，4个标题试图进入下一个可用的空间——通常是右列，而不是我们想要的左边。

这里的解决方案(以及更普遍的任何类似的问题)是添加一个黑客标签，隐藏在移动设备上，存在于平板电脑+上，将标题推出，然后被负边缘覆盖-就像这样:

[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标签允许显示的标签出现在更早或更晚的流程中，然后向上或向下拉，以掩盖这些hack标签。

注意:为了在链接的jsfiddle中实现简单的示例，我使用了固定的高度，但是我正在处理的实际站点内容在所有5个标记中的高度是不同的。它在标签高度上有较大的差异，特别是图像和描述。

注2:根据你的布局，你可能在tablet+(或更大的分辨率)上有足够一致的列顺序，你可以避免使用hack标签，而是使用margin-bottom，如下所示:

注意3:这使用Bootstrap 3。Bootstrap 4使用了不同的网格集，不能用于这些示例。

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

2014-07-18 22:14:59

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

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

你需要颠倒B和C的顺序，然后应用order-{breakpoint}-first到B，并应用两个不同的设置，一个将使它们共享相同的cols，另一个将使它们采用12个cols的全宽度:

较小的屏幕:12 cols到B和12 cols到C 更大的屏幕:12 cols (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

2018-07-05 22:12:37

这很简单，写你的html的方式，你想要它在移动中被查看。然后使用引导订单类，您可以安排如何在桌面上查看它。

<html>
<head>
 <title>Order View</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="row">
  <div class="col order-md-2">
    <h1>IMAGE</h1>
  </div>
  <div class="col order-md-1">
    <h1>TEXT</h1>
  </div>
</body>
</html>

2022-07-03 15:22:21

我如何在移动布局上改变引导3列顺序?

推荐文章

最新文章

标签