编辑：这个答案是针对bootstrap 3.x的，4+版本使用了一个不应该受到这个问题影响的flexbox网格系统。
有时候我会将网格列从浮动改为内联块来防止这种行为。记得清除列之间的所有空格，否则会破坏布局（http://css-tricks.com/fighting-the-space-between-inline-block-elements/）。

.row.inline-block > *{display: inline-block; float: none; vertical-align: top;}

然后，只需将.inline-block类添加到行中即可
这里有一把小提琴：http://jsfiddle.net/0q346dde/2/
附加功能：内联块列也可以使用verical-align: middle;垂直居中或使用vertical-align: bottom;与底部对齐

在您的例子中，如果您看到test3图标上方的div的高度随着屏幕尺寸的减小而增加，那么您必须根据您的要求固定该div的高度。

验证码：

.test {
     height: 40px;
}

超文本标记语言：

<div class "row">
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test1</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test2</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test3</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
   <div class="col-xs-6 col-md-3">
       <p><img src="http://www.photoshopbuzz.com/wp-content/uploads/2011/11/red-stitch-icon-122-bebo.png" alt="" title="" class="easy-icon" /></p>
       <div class="iconname">Test4</div>
       <div class="text align-left icondescription">Sit amet, consetetur adipscing elitr, sed diam non umy eirmod tempor invidunt.</div>
       <div class="align-left test"><a href="product.html" class="product-button"><span class="arrow">&gt;</span> ABCDE TEST1 PRODUCTS</a></div>
   </div>
</div>

你需要使用容器div和row类来处理每一行，这样你就可以确保浮点数被清除了。
因此，您将获得：

<div class="row">
    <div class="col-xs-6 col-md-3"></div>
    <div class="col-xs-6 col-md-3"></div>
</div>

Here's an updated fiddle

添加一个空的col div可能会有所帮助。

<div class="col"></div>