html - 更改不同行之间的堆栈顺序 flexbox

Question

早上好。我试图在 flexbox 情况下更改堆叠顺序，其中有 2 列，但第一列包含一个点，第二列需要放在中间。因此，在移动设备上时，我需要对它们进行不同于源顺序的排序。

这是大的

col 1     col 2
----------==============
[A]         [C]
[B]

其中A和B在一列，C在另一列

但是在小断点上，它需要

[A]
[C]
[B]

仅使用 Flexbox 是否可行？

所以澄清一下。 HTML 结构如下:

row
  column
    divA
    divB

  column
    divC

Codepen example

.a { background-color: green; }
.b { background-color: red; }
.c { background-color: blue; }

.row {
  display: flex;
  flex-direction: column;
}
.column {
  flex: 1;
}

@media (min-width: 768px) {
  .row {
     flex-direction: row;
  }
}

<div class="row">
  
  <div class="column">
      <div class="a">A</div>
      <div class="b">B</div>
  </div>
  <div class="column c">C</div>
</div>

Answer 1

更新

使用原始 html 和 display: contents 允许 c 在桌面上占据全高而不增加高度。也更好地解决了原来如何改变两个独立 div 中元素顺序的问题

.a {
  background-color: green;
  order: 1;
  width: 100%;
}

.b {
  background-color: red;
  order: 3;
  width: 100%;
}

.c {
  background-color: blue;
  order: 2;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row; 
  flex-wrap: wrap;     /* add this so you don't need the extra wrapper div */
}

.column {
  width: 50%; /* start off width children being 50% width */
}

@media (max-width: 768px) {
  .column {
     width: 100%;
  }
  .column:first-child {
     display: contents;
  }
}

<div class="row">
  <div class="column">
      <div class="a">A</div>
      <div class="b">B</div>
  </div>
  <div class="column c">C</div>
</div>

原始答案

您可以通过媒体查询和顺序实现您想要的:

.a {
  background-color: green;
  order: 1;
}

.b {
  background-color: red;
  order: 3;
}

.c {
  background-color: blue;
  order: 2;
}

.row {
  width: 100%;
  display: flex;
  flex-direction: row; 
  flex-wrap: wrap;     /* add this so you don't need the extra wrapper div */
}

.row>div {
  width: 50%; /* start off width children being 50% width */
}

@media (max-width: 768px) {
  .row>div {
     /* for small screens */
    width: 100%;
  }
}

<div class="row">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>