移动设备上的2列Flexbox Grid

Question

为noob问题道歉！

我有一个8列的flexbox网格，在大型设备上显示如下。

https://s14.postimg.org/ixpybtxmn/desktop-grid.jpg

但是，在移动设备上，它目前显示如下。

https://s14.postimg.org/dddh1mm1d/mobile.jpg

以下是我的代码的精简版

`https://codepen.io/igosean/pen/rdrgZP`

我想要的是在移动设备上以50％宽度堆叠到两列的网格。 如果有人能提供帮助，我将不胜感激。

Answer 1

试试这个：

＆＃13;

＆＃13;

.para-top:before {
    left: 284px;
}

＆＃13;

.flex-grid {
  display: flex;
  margin: 0 0 40px 0;
  
}

.col img { 
  max-width: 200px;
}

.flex-grid .col {
  flex: 1;
}

@media (max-width: 900px) {
  .flex-grid {
    flex-wrap: wrap;
  }
  .flex-grid .col {
      flex: 1;
      width: 50%;
      margin: 0 0 10px 0;
  }
}

＆＃13;

＆＃13;

＆＃13;