我正在做一个电子商务网站。在全屏视图中，3个产品，即3个产品贴图，即3个div并排显示。下面是相关的css代码。
.single-product{
width: 33%;
float: left;
margin: 2px 64px;
background: white;
margin-bottom: 20px;
} /* For each individual product */
.products-section{
display:flex;
flex-direction: row;
justify-content: space-evenly;
padding-top: 20px;
} /* For the whole product section */
当我切换到移动视图时，相同的3个产品在屏幕上显示在较小的产品贴图中。现在，我希望页面只显示2个产品瓷砖，而不是3个当屏幕在移动视图。如何在CSS中做到这一点？
可以使用media查询完成：
null
body>div {
background: #aaa;
display: flex;
flex-wrap: wrap;
}
body>div>div {
flex-grow: 1;
width: 33%;
height: 100px;
}
body>div>div:nth-child(even) {
background: lightgreen;
}
body>div>div:nth-child(odd) {
background: lightpink;
}
@media screen and (max-width:600px) {
body>div>div {
flex-grow: 1;
width: 50%;
height: 100px;
}
}<div >
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>