Question

嗨，我正在努力解决这个问题。

桌面：

Div A

Div B

但在回应中，div必须改变这样的立场：

响应：

Div B

Div A

我做了jsfiddle：

＆＃13;

#a {
  height: 50px;
  width: 100%;
  background-color: red;
}

#b {
  height: 50px;
  width: 100%;
  background-color: green;
}

＆＃13;

<div id="a">
  div 1
</div>
<div id="b">
  div2
</div>

＆＃13;

这可能吗？

Answer 1

您可以使用CSS网格布局中的grid-row

＆＃13;

section {
  display: grid;
  grid-auto-rows: minmax(50px, auto)
}

#a {
  background-color: red;
}

#b {
  background-color: green;
}

@media (max-width:768px) {
  #b {
    grid-row: 1
  }
}

＆＃13;

<section>
  <div id="a">
    div 1
  </div>
  <div id="b">
    div2
  </div>
</section>

＆＃13;

<强>备选方案：

同时使用order和CSS网格布局

＆＃13;

section {
  display: grid;
  grid-auto-rows: minmax(50px, auto)
}

#a {
  background-color: red;
}

#b {
  background-color: green;
}

@media (max-width:768px) {
  #b {
    order: -1
  }
}

＆＃13;

<section>
  <div id="a">
    div 1
  </div>
  <div id="b">
    div2
  </div>
</section>

＆＃13;

使用flexbox layout _{中的column-reverse（正如@ G-Cyr在下面的评论中所建议的那样）}

＆＃13;

section {
  display: flex;
  flex-direction: column;
}

div {
  height: 50px;
}

#a {
  background-color: red;
}

#b {
  background-color: green;
}

@media (max-width:768px) {
  section {
    flex-direction: column-reverse;
  }
}

＆＃13;

<section>
  <div id="a">
    div 1
  </div>
  <div id="b">
    div2
  </div>
</section>

＆＃13;

使用flex-wrap/wrap-reverse使用flexbox layout

＆＃13;

section {
  display: flex;
  flex-wrap: wrap
}

div {
  height: 50px;
  flex: 0 100%
}

#a {
  background-color: red;
}

#b {
  background-color: green;
}

@media (max-width:768px) {
  section {
    flex-wrap: wrap-reverse
  }
}

＆＃13;

<section>
  <div id="a">
    div 1
  </div>
  <div id="b">
    div2
  </div>
</section>

＆＃13;

使用order使用flexbox layout

＆＃13;

section {
  display: flex;
  flex-direction: column;
}

div {
  height: 50px;
}

#a {
  background-color: red;
}

#b {
  background-color: green;
}

@media (max-width:768px) {
  #b {
    order: -1
  }
}

＆＃13;

<section>
  <div id="a">
    div 1
  </div>
  <div id="b">
    div2
  </div>
</section>

＆＃13;

Answer 2

如果您需要支持旧浏览器，也可以这样做。但这仅适用于元素具有固定高度的情况，否则您将不得不玩其他游戏。

＆＃13;

#a {
  height: 50px;
  width: 100%;
  background-color: red;
}

#b {
  height: 50px;
  width: 100%;
  background-color: green;
}

@media (max-width:768px) {
  #a {
    position: relative;
    top: 50px;
  }
  #b {
    position: relative;
    top: -50px;
  }
}

＆＃13;

<div id="a">
  div 1
</div>
<div id="b">
  div2
</div>

＆＃13;

Answer 3

以下是2选择器和单个规则的另一个答案：transform:scale(-1);

  /* target the container and its direct-child */

div,
div>* {
  transform: scale(-1);
}

@media (min-width:768px) {
  div,
  div>* {
    transform: scale(1);
  }
  #a del {
    text-decoration: none;
  }
  #a ins {
    display: none;
  }

<div>
  <h1 id="a">HTML Ipsum Present<del>s</del><ins>ed</ins></h1>
  <p id="b"><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>    Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci,
    sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
</div>

将div B放在div A的顶部

3 个答案: