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

您应该在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

Answer 2

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

感谢大家的尝试。这是我的解决方案。这有效：

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

适用于移动设备布局的Bootstrap 4.0订购/移动列

2 个答案: