如何在较小的屏幕上使中间div成为第一个

Question

当屏幕很宽时，我有3个div并排显示：

<div class="div1"></div><div class="div2"></div><div class="div3"></div>

---

| div1 | div2 | div3 |

（所有只是向左浮动）

这些工作正常但是当屏幕变小时，我希望它们显示为：

---

| div2 |

| div1 | div3 |

所以中间的div必须被拔出并成为顶级div

我可以用css吗？

任何想法？

Answer 1

您是否可以编辑HTML并使用绝对定位？我倾向于从较小的屏幕到较大的屏幕工作，然后一个选项是使用以下内容：

HTML

<div class="div2"></div><div class="div1"></div><div class="div3"></div>

CSS

div {
    float: left;
}

然后，当屏幕足够大时（使用mediaqueries检查）： HTML保持不变

CSS

div.div1 {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
}
div.div2 {
    display: inline; /* pesky older IE */
    margin-left: "width of div.div1 (%/em/px)";
}