使用纯CSS重新排列div元素

我的站点的主样式表以非常特殊的顺序排列div元素。在我的打印样式表中，我希望使用纯CSS重新排列div元素的顺序。我该怎么做

假设这些是我的主样式表中的div：

a

d

b

e

c

f

我希望它在打印样式表上看起来像这样（我删除了不利于打印机的div）：

a

f

c

---

d

具体取决于您“想要”如何定位它们，使用CSS的方法有很多种。在页面周围移动div最基本的方法是使用position:absolute并相应地调整top/left/etc CSS属性。我认为它仍然适用于印刷品

---

请注意，我不会仅仅依靠绝对定位的项目来设计网页，但这是一种方法

如果内容是流动的和/或动态的，您将遇到问题。如果您能够可靠地知道项目之间的关系，您可以执行以下操作：

<div style="width:100px;position:relative;left:100px">
<div style="width:100px;position:relative;left:-100px">

---

这将交换两个并排div的可视位置。

通常，否：您不能使

位置：静态

项（默认）以不同的顺序流动。CSS改变了元素的表示方式，但是在内容的语义和表示方式之间有一条模糊的界线。正如一个句子和段落逻辑上紧跟另一个句子和段落一样，您不能使用CSS来更改内容的含义。

您可以删除不需要的div，然后像这样堆叠剩余的div

---

我不确定您是否有意将“F”div移动到第二个位置，但如果您将内容以一种方式订购到Web并重新订购以供打印，这似乎很尴尬。

可以肯定的是，您是否可以进一步阐述“重新排列我的div元素的顺序”的含义？

div {
    width: 50%;
    background-color: #ccc;
    float: left;
}

/* print CSS */

div {
    float: none;
    width: 100%;
}

#b, #e {
    display: none;
}