Css 如何将flexbox项目从移动设备上的单列重新排序到桌面上的列和行

我有一个由三个div组成的flexbox容器

<div className="container">

  <div className="location-select-box">
    <h3>Find A Retailer</h3>
    <p>some text</p>
  </div>

  <div className="map">
    /** full width map image mobile, 50% width desktop **/
  </div>

  <div className="location-listing">
     <Store />
     <Store />
  </div>

</div>

然而在桌面上，我基本上需要将页面分成两列，地图在右边50%的宽度，而

位置选择框

和

位置列表

在左边分为两行--

位置选择框

上方

位置列表

我想不出来。我的桌面CSS：

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}

我曾尝试向每个部分添加各种

order

属性，但我找不到一种适合屏幕50%列（第1列有两行）的组合

谢谢。

您必须将flex与顺序一起使用。在下面的桌面示例中，不要忘记使用@media查询

HTML:

---

方法2

HTML:

---

非常感谢。但我实际上需要2个50%的列。所以绿色的正方形我需要落在蓝色的正方形下面，绿色和蓝色都要有50%的宽度。我添加了第二个例子，如果这不起作用，那么你显然对解释有问题，一般来说这些东西至少应该在图片中显示！

.container {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
}

<div class="container">

  <div class="location-select-box">
     25%
  </div>

  <div class="map">
     50%
  </div>

  <div class="location-listing">
    25%
  </div>

</div>

.container {
  display: flex;
  text-align: center;
}

.map {
  flex-basis: 50%;
  order: 3;
  flex-grow:1;
  background-color: red;
  padding: 20px;
  margin: 5px;
}

.location-select-box {
  order: 1;
  flex-grow:1;
  background-color: blue;
  padding: 20px;
  margin: 5px;
}
.location-listing {
  order: 2;
  flex-grow:1;
  background-color: green;
  padding: 20px;
  margin: 5px;
}

<div class="container">

  <div class="location-select-box">
     50%
  </div>

  <div class="map">
     50%
  </div>

  <div class="location-listing">
    50%
  </div>

</div>

.container {
  display: flex;
  flex-direction: row-reverse;
  text-align: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.map {
  width: 50%;
  order: 1;
  background-color: red;
}

.location-select-box {
  order: 2;
  width: 50%;
  background-color: blue;
}
.location-listing {
  order: 3;
  background-color: green;
  width: 50%;
}