Html 如何更改引导列的顺序？

下面是如何将块放置在桌面上的行类中，该行类在桌面上看起来很好。

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

1
3
2

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

你知道如何在xs设备上用纯css改变第二块和第三块的顺序吗

1
3
2

,， 而不是

像现在这样

---

谢谢。

还包括容器和行是很重要的。

原始代码是这样的吗

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

1.
2.
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

我们可以对大屏幕中的列重新排序，并在左侧显示侧栏，在右侧显示主要内容

---

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

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>

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

.包裹{
位置：相对位置；
}
.区块1{
填充权：33.3333%
}
@介质（最小宽度：768px）{
.区块2{
位置：绝对位置；
排名：0；
右：0；
宽度：33.333%；
}
}

HTML:

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

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

区块1
第3区
第2区

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

你知道如何用纯CSS改变第二和第三块的顺序吗 在xs设备上，因此

试试这个：

文件
.盒子{
高度：300px；
}
.框-1{
背景颜色：橙色
}
.方框-2{
背景颜色：蓝色；
}
.方框-3{
背景颜色：绿色；
}

您可以使用绝对定位（仅当您知道块的高度时），但您可以发布代码，这样我就可以看到我可以做什么了吗？请提供html结构，说明这种方法如何帮助我处理我提到的3个块？非常感谢。