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

Question

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

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

---

|分区1 |分区2 | div3 |

(都只是向左浮动)

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

---

| div2 |

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