更改不同行之间的堆栈顺序flexbox [英] Changing stack order between different rows flexbox

问题描述

早安.我正在尝试在flexbox情况下更改堆叠顺序，该情况下有2列，但是第一列包含一个需要在其中插入第二列的位置.因此，在移动设备上时，我需要订购的商品与原始商品的订购商品不同.

Goodmorning. I am trying to change the stacking order in a flexbox situation, where there are 2 columns, but the first column contains a spot where the second column needs to be put in between. So when on mobile I need them to be ordered different than source order.

这很大

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

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

Where A and B are in one column, and C is in the other

但是在较小的断点上，它必须是

But on small breakpoint, it needs to be

[A]
[C]
[B]

仅使用Flexbox就能做到吗?

Is this possible using just Flexbox?

因此请澄清.HTML结构是这样的:

So to clarify. The HTML structure is as such:

row
  column
    divA
    divB

  column
    divC

Codepen示例

.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>

推荐答案

您可以通过媒体查询和订购来实现所需的目标:

You can achieve what you want with media queries and order:

.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>

这篇关于更改不同行之间的堆栈顺序flexbox的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！