将来自父母的所有孩子像在移动媒体上查询纯css的每两个小组一样

Question

没有JavaScript或网格，因为它只是一个登陆页面，我希望在所有浏览器中都受支持，所以我尝试创建一个价格页面，如下图所示：

在此示例中，我使用flex。

价格块将带有全文，我想在所有要使用的位置之间保持比例高度：

display: flex; // for parents

和

flex: 1; // for childrens

具有相同的高度，这就是为什么我将蓝卡合并到一个容器中的原因。

示例：

问题是，当我在移动视图上调整浏览器的大小时，这需要像下面这样：

Price1
Info1

Price2
Info2

Price3
Info3

但是我不能重新排序，因为蓝色div和红色容器是同级。我的结果是一个很大的失败：

代码：https://codepen.io/raulratiu/pen/PowGjOZ?editors=1100

Answer 1

尝试使用宽度：

    .container {
    	display: flex;
    	width: 100%;
    	}
    	.top {
    		width: calc(100% / 3);
    	}

    	.price {
    		background-color: blue;
    		flex: 1;
    		border: 1px solid #000;
    	}
    	.info {
    		background-color: red;
    		flex: 1;
    		border: 1px solid #000;
    	}


    	@media (max-width: 991px) {
    		.container{
    			display: block;
    		}	
    		.top {
    		 width: 100%;
    	}	
    	}

    <div class="container">
    		<div class="top">
    			<div class="price">
    				<h1>Price1</h1>
    			</div>
    			<div class="info">
    				Info1
    			</div>
    		</div>
    		<div class="top">
    			<div class="price">
    				<h1>Price2</h1>
    			</div>
    			<div class="info">
    				Info2
    			</div>
    		</div>
    		<div class="top">
    			<div class="price">
    				<h1>Price3</h1>
    			</div>
    			<div class="info">
    				Info3
    			</div>
    		</div>
    	</div>