Question

移动视图

我上传了我的桌面和移动视图。我给了div一些数字。我想改变div的顺序，如下图所示。

预期行为

有谁可以帮我在这里更改移动视图中div的顺序？

Answer 1

使用bootstraps visible-xs hidden-xs类为桌面和移动视图定义html

Answer 2

您可以使用media queries和css order property

来实现这一目标

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        div[class^="d"]{
            border: 3px solid black;
            width: 100px;
            height: 80px;
            margin: 5px auto;
        }
        .ld{
            border: 0;
            width: 100px;
            height: 90vh;
            display: flex;
            flex-wrap: wrap;
            text-align: center;
            margin: 0 auto;
            font-size: 1.5em;
        }
        @media screen and (max-width:400px){
            .d2{
                order: 2;
            }
            .d3{
                order: 4;
            }
            .d4{
                order: 1;
            }
            .d5{
                order: 3;
            }
            .d6{
                order: 5;
            }

        } 
    </style>
</head>
<body>
    <div class="ld">
        <div class="d1">1</div>
        <div class="d2">2</div>
        <div class="d3">3</div>
        <div class="d4">4</div>
        <div class="d5">5</div>
        <div class="d6">6</div>
    </div>
</body>
</html>

在移动视图中更改div的顺序

2 个答案: