所以基本上我有這個表格，就是你看到的貝寧國旗。

我想實現(xiàn)的是完全相同的副本，但鏡像，綠色在右邊，黃色在藍(lán)色的上面，但當(dāng)我使用反排時，紅色反而落在綠色下面。

這是一個正常的例子 在此輸入圖像描述

代碼如下:

.flag{
   position:relative;
   display:flex;
   flex-flow:column wrap;
   width:200px;
   height:150px;
   border:2px solid black;
}

>! flex-direction= row-reverse;

.green{background:green;}
.yellow{background:yellow;}
.red{background:red;}

.col1{width:40%;height:100%;}
.col2{width:60%;height:50%;}

<div class=flag>
 <div class='col1 green'></div>
 <div class='col2 yellow'></div>
 <div class='col2 red'></div>
</div>

# # #在您的示例中，行反轉(zhuǎn)的作用是將伸縮方向從列改為行反轉(zhuǎn)，因此它不再位于列流中也就不足為奇了。

請改用wrap-reverse來反轉(zhuǎn)列的換行方向:

.flag {
   position: relative;
   display: flex;
   flex-flow: column wrap-reverse;
   width: 200px;
   height: 150px;
   border: 2px solid black;
}

.green {background: green;}
.yellow {background: yellow;}
.red {background: red;}

.col1 {width: 40%; height: 100%;}
.col2 {width: 60%; height: 50%;}

<div class='flag'>
 <div class='col1 green'></div>
 <div class='col2 yellow'></div>
 <div class='col2 red'></div>
</div>