Question

当屏幕尺寸很小时，我希望黄色为蓝色。

我知道为什么它现在不起作用，因为黄色不是其他盒子的兄弟，我该怎么做才能解决这个问题？

＆＃13;

.container1 {
  display: flex;
  flex-flow: column;
}

.container2 {
  display: flex;
  flex-flow: row;
}

.box {
  border: 1px solid black;
  width: 50px;
  height: 50px;
  margin: 5px 5px 5px 5px;
}

#b1 {
  background-color: red;
}

#b2 {
  background-color: blue;
}

#b3 {
  background-color: green;
}

#b4 {
  background-color: yellow;
}

@media screen and (max-width:500px) {
.container2 {
  display: flex;
  flex-flow: column;
}
  #b1 {
    order: 1;
    -webkit-order: 1;
  }

  #b2 {
    order: 2;
    -webkit-order: 2;
  }

  #b3 {
    order: 4;
    -webkit-order: 4;
  }

  #b4 {
    order: 3;
    -webkit-order: 3
  }
}

＆＃13;

<div class="container1">
  <div class="container2">
    <div class="box" id="b1"></div>
    <div class="box" id="b2"></div>
    <div class="box" id="b3"></div>
  </div>
  <div class="box" id="b4"></div>
</div>

＆＃13;

我需要添加更多文字来满足SO，我想我在上面的文字中得到了所有相关信息：）

Answer 1

使用order将无效，因为订单与容器相关，而非DOM。

CSS order属性指定用于在其Flex容器中布置Flex项的顺序。元素按订单值的升序排列。具有相同订单值的元素按它们在源代码中出现的顺序排列。

^{MDN - "order"}

CSS Grid可以做到这一点。

Codepen Demo

＆＃13;

.container {
  padding: 5px;
  display: grid;
  width: 500px;
  margin: 1em auto;
  grid-auto-columns: 50px;
  grid-auto-rows: 50px;
  grid-gap: 5px;
}

.box {
  border: 1px solid black;
  width: 50px;
  height: 50px;
}

#b1 {
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 2;
}

#b2 {
  background-color: blue;
  grid-column-start: 2;
  grid-column-end: 3;
}

#b3 {
  background-color: green;
  grid-column-start: 3;
  grid-column-end: 4;
}

#b4 {
  background-color: yellow;
  grid-column-start: 1;
  grid-column-end: 2;
}

@media screen and (max-width: 500px) {
  #b1,
  #b2,
  #b3,
  #b4 {
    grid-column-start: 1;
    grid-column-end: 2;
  }
  #b3 {
    grid-row-start: 4;
    grid-row-end: 5;
  }
  #b4 {
    grid-row-start: 3;
    grid-row-end: 4;
  }
}

＆＃13;

<div class="container">
  <div class="box" id="b1"></div>
  <div class="box" id="b2"></div>
  <div class="box" id="b3"></div>
  <div class="box" id="b4"></div>
</div>

＆＃13;

It might be possible in Flexbox但所有浏览器尚未完全支持必要的属性。截至撰写本文时，我认为它只是Firefox。

flexbox命令：我想要在不是兄弟的元素下打开框

1 个答案: