Question

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

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

1
3
2

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

任何想法如何在xs设备上使用纯css更改第2和第3块的顺序，就像

1
3
2

，而不是

1
2
3

是现在吗？

谢谢。

Answer 1

任何想法如何使用纯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

实现所需的行为，则可以考虑使用此解决方案

Answer 2

还必须包含Container和Row。 https://getbootstrap.com/docs/4.0/layout/grid/

原始代码看起来像这样吗？

<div class="container">
  <div class="row">
    <div class="col-sm-8 col-xs-12">
      1
    </div>
    <div class="col-sm-4 col-xs-12">
      2
    </div>
  </div>
  <div class="row">
    <div class="col-sm">
      3
    </div>
  </div>
</div>

Answer 3

您不能在较小的屏幕中更改列的顺序，但可以在较大的屏幕中进行更改。

因此，更改列的顺序。

<!--Main Content-->
<div class="col-lg-9 col-lg-push-3">
</div>

<!--Sidebar-->
<div class="col-lg-3 col-lg-pull-9">
</div>

默认情况下，这将首先显示主要内容。

因此，在移动设备中首先显示主要内容。

通过使用col-lg-push和col-lg-pull，我们可以在大屏幕中对列进行重新排序，并在左侧显示侧边栏，在右侧显示主要内容。

Column Reordering in Bootstrap

Answer 4

假设第2块具有固定的高度，并且其高度始终与第一个块相同，则可以执行以下操作：

CSS：

<style type="text/css">
    .wrap {
        position: relative;
    }

    .block1 {
        padding-right: 33.3333%
    }

    @media(min-width: 768px) {
        .block2 {
            position: absolute;
            top: 0;
            right: 0;
            width: 33.333%;
        }
    }
</style>

HTML：

<div class="wrap">
    <div class="block1">
        <div class="col-sm-12">Block1</div>
    </div>
    <div class="col-sm-12">Block 3</div>
    <div class="block2">
        <div class="col-sm-12">Block 2</div>
    </div>
</div>

请注意，使用此方法时，如果块2的长度比块1的长，它将在块3上溢出。

如何更改Bootstrap列的顺序？

4 个答案: