用于移动布局的引导4.0排序/移动列

Question

这是布局在lg中的样子。

在移动设备上，sm，我希望列的顺序是: 1，3，5，2，6，4

是否有可能和/或相当简单地使用Bootstrap 4.0或重写？

我使用order-sm 1-12的所有尝试都失败了。我不能把第4栏写到最后，成为最后一篇专栏，不过，我会继续写下去。

如果我所要求的是不可能的话，移动4在移动设备上是最重要的重组。

 _______________________
|                 |     |
|     1           |  2  |
|_________________|     |
|           |     |_____|
|     3     |  4  |     |
|           |     |  5  |
|           |     |_____|
|           |_____|     |
|___________|     |  6  |
                  |     |
                  |_____|

<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        6
    </div>
</div>

编辑:这几乎是我想要的，但代码在第1栏和第3栏之间产生了一个空白。第6栏也落在第3栏下面。第6栏的理想位置在5以下。

 _______________________
|                 |     |
|     1           |  2  |
|_________________|     |
 _________________|_____|
|           |     |     |
|     3     |  4  |  5  |
|           |     |_____|
|           |_____|
|___________|
|     |
|  6  |
|     |
|_____|

<div class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 d-flex flex-row flex-wrap'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-sm-1 order-md-1 order-lg-1'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-4 order-sm-4 order-md-4 order-lg-2'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-2 order-sm-2 order-md-2 order-lg-3'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-6 order-sm-6 order-md-6 order-lg-4'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-3 order-sm-3 order-md-3 order-lg-5'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-5 order-md-5 order-lg-6'>
        6
    </div>
</div>

Answer 1

因此，如果通过使用一些我不知道的属性来解决这个问题，那么就用flex和order来解决这个问题吧。但是我没有时间等待这样的答案，所以我用jQuery和.appendTo()进行重写，检查了$(window).resize()上的$(window).width()。

谢谢大家的努力。这是我的解决方案。这样做是可行的：

<script>
    $(window).resize(function()
    {
        if($(window).width() < 767)
        {
            $("#mobOrder-1").appendTo("#mobAnchor");
            $("#mobOrder-2").appendTo("#mobAnchor");
            $("#mobOrder-3").appendTo("#mobAnchor");
            $("#mobOrder-4").appendTo("#mobAnchor");
            $("#mobOrder-5").appendTo("#mobAnchor");
            $("#mobOrder-6").appendTo("#mobAnchor");
        }
        else
        {
            $("#mobOrder-1").appendTo("#mobAnchor");
            $("#mobOrder-4").appendTo("#mobAnchor");
            $("#mobOrder-2").appendTo("#mobAnchor");
            $("#mobOrder-6").appendTo("#mobAnchor");
            $("#mobOrder-3").appendTo("#mobAnchor");
            $("#mobOrder-5").appendTo("#mobAnchor");
        }
    });
</script>

<div id='mobAnchor' class='my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>
    <div id='mobOrder-1' class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left'>
        1
    </div>
    <div id='mobOrder-4' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        2
    </div>
    <div id='mobOrder-2' class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left'>
        3
    </div>
    <div id='mobOrder-6' class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left'>
        4
    </div>
    <div id='mobOrder-3' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        5
    </div>
    <div id='mobOrder-5' class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right'>
        6
    </div>
</div>

Answer 2

您应该在d-flex中使用root来使用您正在使用的类'my-5 px-3 col-sm-12 col-md-12 col-lg-12 float-left'>，如下所示。

HTML

<div class='my-5 px-3 d-flex flex-row flex-wrap'>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-9 float-left order-1 order-1 order-sm-1'>
        1
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-2 order-sm-4'>
        2
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-6 float-left order-3 order-sm-2'>
        3
    </div>
    <div class='mt-3 mb-3 col-sm-12 col-md-12 col-lg-3 float-left order-4 order-sm-2'>
        4
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-5 order-sm-6'>
        5
    </div>
    <div class='mb-3 col-sm-12 col-md-12 col-lg-3 float-right order-6 order-sm-5'>
        6
    </div>
</div>

注意:我在代码中添加的顺序可能与您预期的不同，只需将order-sm-*更改为您想要的顺序即可。

演示：https://codepen.io/rahul-pxl/pen/pqgmWo