Flexbox:在移动设备上将两列折叠为一列，但重新排列元素

Question

我很难理解flexbox(双关语(对我的产品页面的完全灵活性。我的桌面设置如下：flex容器中有两个列div。左列有一个div，其中包含产品图像(调用DIV1(。右列div中有两个div，标题/描述div(调用DIV2(和变体样例(大小和颜色输入(div(调用DIV3(。对于移动设备，我想要一个单独的列，我可以通过灵活的方向实现：列，但排序是我想要调整的。基本上，左边的列在上面，右边的列在下面，顺序是DIV1、DIV2和DIV3。然而，我想把DIV2和DIV3分开，这样顺序是DIV2、DIV1，然后是DIV3。

我目前的解决方案我无法判断它是否是好的做法，但我已经创建了DIV2的第二个版本，并将其放在左列中，我隐藏起来，直到移动开始，我使其可见，然后隐藏DIV2的右列版本。

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

Answer 1

您在这里已经达到了flex box为您所能做的事情的极限，虽然您可以在每个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>