html - Flex媒体查询:从左到右，从上到下

有没有办法使它成为2列767px和1列480px？变成1列时是否可以使flex的高度相同？

这是我到目前为止所拥有的：

.col-container {
	display: flex;
	width: 100%;
}
.col-container>.col {
	padding:10px;
	width:100%;
	margin:0;
}
.col:nth-child(odd) {
	background-color:green;
}
.col:nth-child(even) {
	background-color:blue;
}

@media only screen and (max-width: 767px) {
	.col-container {
		flex-wrap: wrap;
	}
}

<div class="col-container">
	<div class="col">
		<h2>Column 1</h2>
		<p>Hello World</p>
	</div>

	<div class="col">
		<h2>Column 2</h2>
		<p>Hello World!</p>
		<p>Hello World!</p>
		<p>Hello World!</p>
		<p>Hello World!</p>
	</div>

	<div class="col">
		<h2>Column 3</h2>
		<p>Some other text..</p>
		<p>Some other text..</p>
	</div>
</div>

这个伸缩显示四列



到全宽到767px

最佳答案

只需将您的CSS代码更改为下面的代码即可。

我想我认为您正在容器上使用width:50%，就像我在注释中所指的那样，它应该用于子元素，即代码中的.col。我希望这能解决您的需求。 :)

我已经在Codepen上添加了您的代码，以防您需要它=> https://codepen.io/anon/pen/gKgWgm

    .col-container {
      display: flex;
      width: 100%;
    }
    .col-container>.col {
      display:block;
      padding:10px;
      width:100%;
      margin:0;
      border:1px solid red;
    }
    .col:nth-child(odd) {
      background-color:green;
    }
    .col:nth-child(even) {
      background-color:blue;
    }

    @media only screen and (max-width: 767px) {
      .col-container {
        flex-wrap: wrap;
      }
      .col-container .col{
        width:50%;
        min-height:250px;
      }
    }

    @media only screen and (max-width: 460px) {
      .col-container .col{
        width:100%;
        min-height:200px;
      }
    }