проблемы с фиксацией в Foundation 5

Question

при масштабировании окон окна, которые выпадают из сетки, у кого есть какие-либо предложения? , кажется, что если столбцы не имеют одинаковый размер, случается, выпадают из малого 6

<div class="large-3 columns small-6 text-center"><img src="img/1.png" width="150" height="150"> 
    <h2> 1</h2> 
    <h3>Lorem ipsum dolor sit amet</h3> 
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis </p></div> 
<div class="large-3 columns small-6 text-center"> 
<img src="img/2.png" width="150" height="150"> 
    <h2>2</h2> 
    <h3> Lorem ipsum </h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet veniam, quis </p></div> 

<div class="large-3 columns small-6 text-center"> 
<img src="img/3.png" width="150" height="150"> 
<h2>3</h2> 
    <h3>Is even more essential</h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut wisi enim ad minim veniam, quis </p></div> 
<div class="large-3 columns small-6 text-center"> 
<img src="img/4.png" width="150" height="150"> 
<h2>4</h2> 
    <h3>Lorem ipsum dolor sit</h3> 
    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis </p></div> 
</div>![enter image description here][1] 

Answer 1

Если я понимаю правильно, то есть проблема в маленьком экране. Возможно, вам помогут очистка флоат-элементов. Эта очистка будет отображаться только для небольших экранов

Попробуйте добавить после двух .columns элемента:

<div class="clearfix show-for-small"></div> 

.clearfix { 
    *zoom: 1; 
} 

.clearfix:before, 
.clearfix:after { 
    content: " "; 
    display: table; 
} 

.clearfix:after { 
    clear: both; 
}