使用CSS仅交换DIV位置

Question

使用CSS仅交换DIV位置

94

我想通过交换两个

的位置来实现响应式设计（网站在浏览器宽度不同时呈现不同的外观，更适合移动设备）。

目前我的代码大概是这样的:

<div id="first_div"></div>
<div id="second_div"></div>

但是只使用CSS，是否可以交换它们的位置，使其看起来像second_div在前面呢？HTML保持不变。我尝试使用浮动和其他方法，但它似乎不能按照我想要的方式工作。我不想使用绝对定位，因为

的高度总是在变化。有没有解决方案或者根本无法实现？

- Dragonfly

你是否担心IE8的兼容性问题？尝试使用媒体查询（http://caniuse.com/#feat=css-mediaqueries）。 - Mooseman

2

可能是重复的问题：在响应式设计中，将位于顶部的元素移动到底部的最佳方法是什么？ - cimmanon

这是我目前用于响应式设计的工具，但是当它用于移动设备时，底部的div需要排在第一位。 - Dragonfly

1

这取决于div的当前布局。例如，如果first_div已经具有float: left，而second_div具有float: right，那么解决方案就非常简单 - 您只需要反转float的方向即可。其他布局将更难修复。请告诉我们当前的布局。 - Rory O'Kane

2022解决方案 - leonheess

11个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Max Tuzenko · Answer 1

昨天遇到了同样的问题。在我的情况下，网格区域非常有效：

.content-body {
    display: grid;
    grid-template-areas: " left right ";
    grid-template-columns: 1fr 1fr;
}
.first_div {
    grid-area: right;
}
.second {
    grid-area: left;
}