时间戳

首页 > 解决方案 > 如何更改 Bootstrap 列的顺序？

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

问题描述

以下是在桌面上看起来不错的行类中的块在桌面上的定位方式。 这就是块在桌面上的定位方式，这很好。

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

1
3
2

不起作用的解决方案：我无法将块 3 放入块 1，因为我需要桌面上块 3 的全宽（屏幕宽度的 100%，而不是块 1 的 100%）。

任何想法如何在 xs-devices 上使用纯 css 更改第 2 和第 3 块的顺序，所以它是

1
3
2

， 并不是

1
2
3

像现在这样？

谢谢你。

标签： htmlcsstwitter-bootstrap-3

解决方案

任何想法如何在 xs-devices 上使用纯 CSS更改第 2 和第 3 块的顺序， 所以它是

尝试这个：

<!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实现所需的行为，您可能会考虑使用此解决方案

推荐阅读