Реагирующая сетка Div Появляется в неправильном положении

Question

В настоящее время я создаю чувствительную сетку, которая равна 2x2. Но iv понял, что при некоторых размерах экрана, третий div появляется ниже четвертого. Может кто-нибудь, пожалуйста, скажите мне, почему он это делает?

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

Thankyou

Answer 1

Если вы перемещаете следующий код вне запроса медиа поэтому он будет действовать на больших экранах, я считаю, что будет вести себя по желанию: JS Fiddle

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