Гибкие медиазапросы: слева направо сверху вниз

Question

Есть ли способ сделать это 2 колонки на 767px и 1 колонка 480px?Можно ли сделать изгиб такой же высоты, когда он превращается в 1 столбец?

Это то, что у меня есть до сих пор:

.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>

Это гибкое шоу с четырьмя столбцами

до полной ширины до 767 пикселей

Answer 1

Просто измените ваш код CSS на приведенный ниже код, он работает.

Как я полагаю, я думаю, что вы используете width:50% для контейнера, как я и предполагал в комментарии, это должно быть для дочернего элемента, т. Е. .col в вашем коде.Я надеюсь, что это решает то, что вы ищете.:)

Я добавил ваш код на коде, если он вам нужен => 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;
      }
    }