在移动视图中将右侧div放在左侧

Question

然而，它是一个基本的布局问题，可能有一个答案，但我找不到它，可能缺少一个合适的搜索字符串。在CSS的帮助下，是否可以在移动视图中将右侧div叠加在左侧div上？默认行为是左侧div下的右侧div浮动。

CSS：

.left {
    position: relative;
    float: left;
    background: #F48024;
    width:576px;
    height: 324px;
}
.right {
    position: relative;
    float: left;
    background: #EFF0F1;
    width:576px;
    height: 324px;
}

HTML：

<div class="main">
    <div class="left"></div>
    <div class="right"></div>
</div>

要了解它，请查看图表。我需要在此图中给出第3个布局。

Answer 1

你可以通过使用弹性盒来实现这一点！将你的css更改为：

Scripting.Runtime

order属性首先确定哪个元素堆栈。您可以在此处阅读有关弹性框的更多信息 https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

这可以作为快速修复。

@media screen and (max-width:480px){
    .main {
        display: flex;
        flex-direction: column-reverse;
    }
}

注意：

您可能还必须使用其他与flex相关的CSS道具，以便在内容中对齐和对齐内容，例如justify-content和align-items

但如果你有很多div，那么所有这些都会被逆转。

div-n
...
div-2
div-1

Answer 3

你可以使用媒体查询做这样的事情

div {
  width: 500px;
  height: 200px;
}

.left-div {
  float: left;
  background-color: yellow;
}

.right-div {
  float: left;
  background-color: green;
}

@media only screen and (max-width: 1000px) {
  .left-div {
    margin-top: 200px;
    position: absolute;
  }
  .right-div {
    position: absolute;
  }
}

<div class="left-div">left</div>
<div class="right-div">right</div>

Answer 4

@media only screen and (max-width: 1000px) and (min-width: 200px) {
  .div {
    margin-top: 200px;
    position: absolute;
    display:flex;
    flex-direction: column-reverse;
  }
}