两根高度相等的柱子在断点处反转

Question

我希望制作两个相同高度的柱子，在845px断点处反转它们的堆叠。我应该如何编写我的CSS用于常规视图与845px @media？

这两种方法的好处和缺点是什么？

Answer 1

您可以使用 Flexbox ：

执行此操作

＆＃13;

＆＃13;

.parent {
  display: flex;
  height: 300px;
}

.parent > .child-1 {
  flex: 1;
  background: red;
}

.parent > .child-2 {
  flex: 1;
  background: blue;
}

@media screen and (max-width: 845px) {
  .parent {
    flex-direction: column;
  }
  .parent > .child-1 {
    order: 2;
  }
}

＆＃13;

<div class="parent">
  <div class="child-1"></div>
  <div class="child-2"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这可以使用flex和order属性来完成。基本思想是使用它们的默认DOM顺序（col 2之前的col 1）堆叠项目，然后在媒体查询中使用order属性来交换顺序，因此col 2位于col 1的左侧。像这样：

＆＃13;

＆＃13;

.container {
  display: flex;
  flex-direction: column;
}

.col {
  flex: 1;
  display: flex;
  flex-basis: 200px;
  flex-direction: column;
  border-width: 1px;
  border-style: solid;
  justify-content: center;
  text-align: center;
  margin: 10px;
  font-family: Arial;
}

.col--1 {
  border-color: red;
  color: red;
}

.col--2 {
  border-color: blue;
  color: blue;
}

@media screen and (min-width: 845px) {
  .container {
    flex-direction: row;
  }
  .col--1 {
    order: 2;
  }
  .col--2 {
    order: 1;
  }
}

＆＃13;

<div class="container">
  <div class="col col--1">
    COL 1<br/> DIV
  </div>
  <div class="col col--2">
    COL 2<br/> DIV
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;