div块的位置（简单的css问题）

Question

我的项目有问题：

<div id="div1"></div>
<div id="div2"></div>

我在 css 中为 desctop @media (min-width:768px) 选项做显示块和向左浮动。第一个70%，第二个30%。在移动设备中，我需要将它们都设为 100% 宽度，并且需要在顶部 div1 上显示 div2。第一个向右浮动，第二个向左浮动不起作用。需要你们的帮助。

Answer 1

如果您想要 div2 在顶部，您的 html 必须将 div2 移到 div1 的顶部

#div2 {
   width:30%;
   height:300px;
   background:red;
   float:right
}

#div1 {
   width:70%;
   height:300px;
   background:yellow;
   float:left
}

@media only screen and (max-width: 768px) {
#div1, #div2 {
  width:100%;
}
}

<div id="div2">div2</div>
<div id="div1">div1</div>

Answer 2

这个怎么样？ Flex box 允许您指定它的方向，如果您真的很挑剔，您可以在项目本身上指定订单号。

#container {
  display: flex;
}

#div2 {
   width:30%;
   height:300px;
   background:red;
}

#div1 {
   width:70%;
   height:300px;
   background:green;
}

@media only screen and (max-width: 768px) {
  #div1, #div2{
    width: 100%;
  }
  #container {
    flex-flow: column-reverse;
  }
}

<div id="container">
  <div id="div1">1</div>
  <div id="div2">2</div>
</div>

div块的位置（简单的css问题）

Position of div blocks (simple css issue)

html

css

position