Разбить 4 деления в 2 строки и 2 столбца реагировать

Question

не могли бы вы мне помочь.У меня есть 4 деления в одном ряду.

<div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
</div>

Теперь я хочу переместить 2 из них в следующий ряд, если ширина <768px. </p>

Я достиг этого с помощью сетки CSS

.container {
    display: grid;
    rid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-template-rows: repeat(4, minmax(300px, auto));
    justify-content: center;
}

  @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .container {
         grid-template-columns: 40% 40%;
    }
 }

Но, к сожалению, CSS Grid не очень хорошо поддерживается в версии браузера IE display:flex, но не могу достичь того же результата.

Вот пример

Может ли кто-нибудь помочь мне?

Решение найдено:

.container{
    display: flex;
    flex-wrap: wrap;
}


.item {
    flex: 25%;
    max-width: 25%;
}


@media (max-width: 800px) {
    .item {
        flex: 50%;
        max-width: 50%;
    }
}


@media (max-width: 600px) {
    .item {
        flex: 100%;
        max-width: 100%;
    }
}

Answer 1

Используйте flex и order:1

См. Скрипту: https://jsfiddle.net/tmg08h34/

  .container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
.container:after {
  content: '';
  width: 100%;
}
    @media only screen and (min-width: 768px) and (max-width: 1024px) {
        .container .item:nth-child(n + 3){
            order: 1;
        }
     }

 <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

Отредактируйте свой комментарий в IE

.container{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
}
 @media only screen and (min-width: 768px) and (max-width: 1024px) {
.container .item:nth-child(2n) {
padding-right: 100%;
 }

}

 <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>

Answer 2

Установите класс .container на display:flex и flex-wrap: wrap.

Таким образом, когда ширина экрана устройства будет мала, чтобы вместить поля .item, они будут перенесены в другой ряд.

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  width: 80px;
  height: 80px;
  border: 1px solid #eee;
}