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

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

导航条 [3] [9]

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

navbar [3] [9]

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

navbar [9] [3]

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

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

这是我的代码:

当前回答

在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

其他回答

更新2018

对于基于Bootstrap 3的原始问题，解决方案是使用推拉。

在Bootstrap 4，现在可以改变顺序，即使当列是全宽垂直堆叠，感谢Bootstrap 4 flexbox。OFC中，push - pull方法仍然可以工作，但是现在在Bootstrap 4中有其他方法来改变列的顺序，使全宽列重新排序成为可能。

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

<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 - xs屏幕使用顺序优先:

<div class="row">
    <div class="col-md-3">
        sidebar
    </div>
    <div class="col-md-9 order-first order-md-last">
        main
    </div>
</div>

引导4(alpha 6): http://www.codeply.com/go/bBMOsvtJhD 引导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>

引导3:http://www.codeply.com/go/wgzJXs3gel

@emre说，“你不能在小屏幕上改变列的顺序，但你可以在大屏幕上这样做”。但是，在Bootstrap 3中应该澄清:“您不能更改全宽“堆叠”列的顺序..”。

2017-03-22 16:44:15

在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

你不能在小屏幕中改变列的顺序，但在大屏幕中可以这样做。

改变列的顺序。

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

在这里演奏小提琴。

2013-11-24 05:35:20

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

代码依赖链接:https://codepen.io/preston206/pen/EwrXqm

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

我会把这个和原来的问题联系起来。使用CSS，导航栏、侧边栏和内容可以被定位，然后对媒体查询中应用的属性进行排序。

2017-10-19 08:14:27

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

例子:

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列顺序?

推荐文章

最新文章

标签