如何在较小的屏幕上使中间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 并使用绝对定位吗？我倾向于从小屏幕到大屏幕工作，一种选择是使用以下内容：

超文本标记语言

<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)";
}