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

如何解决如何将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>

在移动设备上，我需要将它们放在一列中，就像它们的排列顺序一样-我正在使用它。

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

但是，在台式机上，我基本上需要将页面分为两列，地图在右侧为50％的宽度，location-select-box和location-listing在左侧为两行-{{ location-select-box

上方的1}}

我不知道这一点。我的台式机CSS：

location-listing

我尝试为每个部分添加各种.container { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } 属性，但是找不到适合屏幕适合50％列且第1列有两行的组合。

谢谢。

解决方法

https://jsfiddle.net/46t3knvf/

您必须将 flex 用于订单。下面的桌面示例，请不要忘记使用@media查询

HTML：

C:\Users\[My Name]\AppData\Roaming\npm\node_modules\yo\node_modules\execa\index.js:347
                throw err;
                ^

Error: Command failed: powershell (Get-CimInstance -ClassName Win32_OperatingSystem).caption
The term 'Get-CimInstance' is not recognized as the name of a cmdlet,function,script file,or operable program. Check the spelling
 of the name,or if a path was included,verify that the path is correct and try again.
At line:1 char:17
+ (Get-CimInstance <<<<  -ClassName Win32_OperatingSystem).caption
    + CategoryInfo          : ObjectNotFound: (Get-CimInstance:String) [],CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException



    at makeError (C:\Users\[My Name]\AppData\Roaming\npm\node_modules\yo\node_modules\execa\index.js:174:9)
    at Function.module.exports.sync (C:\Users\[My Name]\AppData\Roaming\npm\node_modules\yo\node_modules\execa\index.js:338:15)
    at windowsRelease (C:\Users\[My Name]\AppData\Roaming\npm\node_modules\yo\node_modules\windows-release\index.js:39:19)
    at osName (C:\Users\[My Name]\AppData\Roaming\npm\node_modules\yo\node_modules\os-name\index.js:39:18)
    at new Insight (C:\Users\[My Name]\AppData\Roaming\npm\node_modules\yo\node_modules\insight\lib\index.js:37:13)
    at Object.<anonymous> (C:\Users\[My Name]\AppData\Roaming\npm\node_modules\yo\lib\cli.js:54:17)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)

CSS：

<div class="container">

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

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

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

</div>

---

方法2

https://jsfiddle.net/u0g5a2w4/

HTML：

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

CSS

<div class="container">

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

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

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

</div>