html - 如何更改Bootstrap列的顺序？

这是在行类中在桌面上看起来不错的情况下将块放置在桌面上的方式。

不幸的是，在xs设备上，这看起来不是我们所需的方式。当它在超小型设备上显示时，我需要此命令：

1
3
2

无效的解决方案：我无法将第3块放到第1块中，因为我需要在桌面上使用第3块的整个宽度（屏幕宽度的100％，而不是第1块的100％）。

任何想法如何在XS设备上使用纯CSS更改第二块和第三块的顺序

1
3
2

，
并不是

1
2
3

现在是这样吗？

谢谢。

最佳答案

任何想法如何使用纯CSS更改第二和第三块的顺序
在xs设备上，它是

尝试这个：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
        crossorigin="anonymous">
    <style>
        .box {
            height: 300px;
        }

        .box-1 {
            background-color: orange
        }

        .box-2 {
            background-color: blue;
        }

        .box-3 {
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box box-1 col-sm-8 col-xs-12">

    </div>
    <div class="box box-2 col-sm-4 hidden-xs">

    </div>
    <div class="box box-3 col-xs-12">

    </div>
    <div class="box box-2 col-xs-12 hidden-sm hidden-md hidden-lg">

    </div>
</body>
</html>

如果没有解决方案可以帮助您使用纯CSS实现所需的行为，则可以考虑使用此解决方案

关于html - 如何更改Bootstrap列的顺序？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52592448/