css - 如何使中间 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;
}

然后，当屏幕足够大时（使用媒体查询检查）：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)";
}