在2行和2列中打破4个div响应

Question

请你帮我一下。我一排有4个Divs。

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

现在，如果宽度为<768px，我想将其中2个移到下一行。

我已经通过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%;
    }
 }

但是不幸的是，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

将您的delete类设置为.container和display:flex。

因此，当设备的屏幕宽度较小以容纳flex-wrap: wrap框时，它们将被包裹到另一行。

.item