Flexbox：在移动设备上将 2 列折叠为单列，但重新排列元素

Question

我很难理解 flexbox（双关语）在我的产品页面上的全部灵活性。我的桌面设置如下： flex 容器中有两个列 div。左列有一个包含产品图像的 div（调用 DIV 1）。右列 div 中有两个 div，标题/描述 div（调用 DIV 2）和变体样本（大小和颜色输入）div（调用 DIV3）。对于移动设备，我想要一个可以通过 flex-direction:column 实现的列，但排序是我想要调整的。基本上左列在顶部，然后右列在下面，因此顺序为 DIV 1、DIV2 和 DIV3。但是，我想拆分 DIV2 和 DIV3 以便顺序为 DIV2、DIV1 和 DIV3。

我目前的解决方案我不知道它是否是好的做法，但我创建了 DIV2 的第二个版本并放入左列，然后我隐藏直到移动设备启动并使其可见，然后隐藏右列版本DIV2。

我想知道 flexbox 是否可以成为一个完整的解决方案，并且我想知道我在移动和桌面上隐藏和取消隐藏重复元素是否是不好的做法，因为这是我在使用 flexbox 时能想到的唯一解决方案.我的网站实现可以在www.printperry.com/home/product-page/index.php

看到

Answer 1

你已经达到了 flexbox 在这里可以为你做的事情的限制，虽然你可以在每个 flex 项目上使用order 重新安排事情，但它对你的帮助并不像你的东西（产品信息）那么大想要在移动设备上重新排序被嵌套在另一个 div 中，目的是在桌面视图上显示堆叠在照片旁边。在这种情况下，使用display:grid 更合适。 您可以将桌面设置为 2 列和 3 行，并使图像 div 跨度为 3 行。然后再次更改移动视图的布局，见下文；

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 15px;
  display: grid;
  /*set up a grid layout, 2 by 3 */
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3 1fr);
}

.product-images {
/* make image div span all 3 rows starting from the 1st */
  grid-row: 1 / span 3;
}


/*mobile styles*/

@media screen and (max-width: 940px) {
  .container {
  /*single column layout*/
    grid-template-columns: 1fr;
  }
  
  .product-description {
  /*move prod description to first row of grid*/
    grid-row-start: 1;
  }
  
  .product-images {
   /*move images to second row, everything else follows under neath*/
    grid-row-start: 2;
  }
 
}

<div class="container">
  <div class="product-images">
    [Product Image Set here]
  </div>
  <div class="product-description">
    <span>T-Shirts</span>
    <h1>Gildan 2000</h1>
    <p>Purchase your products blank at wholesale or even better choose your color and sizes and click customize. Use our free online designer to make your designs come to life!</p>
  </div>
  <div class="product-configuration">
    [Product Configuration controls here]
  </div>
  <div class="product-price">
    <span>148$</span>
    <a href="#" class="cart-btn">Add to cart</a>
  </div>
</div>