Responsive Grid Div 出现在错误的位置

Question

我目前正在制作一个 2x2 的响应式网格。但 iv 意识到在某些屏幕尺寸下，第 3 个 div 出现在第 4 个下方。有人可以告诉我为什么这样做吗？

 <div class="container">

        <div class="port">
            <div class="columns eight">
            <h3>Example 1</h3>
             <img src= "https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1"/>
               <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit.r. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit.</p>
            </div>
            <div class="columns eight">
            <h3>example 2</h3>
         <img src= "https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1"/>
            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
            <div class="columns eight">
           <h3>Example 3</h3>
            <img src= "https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1"/>
            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
            <div class="columns eight">
             <h3>example 4</h3>
            <img src= "https://c1.staticflickr.com/1/85/209708058_b5a5fb07a6_z.jpg?zz=1"/>
            <p>Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. Suspendisse nec elit aliquam, ultricies ex rhoncus, dapibus erat. Curabitur faucibus dui hendrerit ex laoreet, at sollicitudin nibh blandit. </p>
            </div>
            </div>

        </div>

http://jsfiddle.net/gdvwsLtt/3/

谢谢

Answer 1

如果您将以下代码移到媒体查询之外，以便它在更大的屏幕上执行操作，我相信它会按预期运行：JS Fiddle

.container .port .eight:nth-child(3) {
   clear: both;
}

Responsive Grid Div 出现在错误的位置

Responsive Grid Div Appears in wrong position

html

grid