<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h3>Error when the row bellow is on sm screen</h3>
<div class="row">
<div class="col-test col-md-4 col-sm-6">
<h3>Small text, col-md-4 col-sm-6</h3></div>
<div class="col-test col-md-4 col-sm-6">
<h3>Small text, col-md-4 col-sm-6</h3></div>
<div class="col-test col-md-4 col-sm-6">
<h3>Long text, col-md-4 col-sm-6</h3>
<p>
Cột này sẽ bị rớt xuống dòng mới. và bên phải sẽ xuất hiện một cột trống vì cột này có độ rộng = 6 trên small screen.
</p>
</div>
</div>
<h2>Right way to format this</h2>
<hr>
<div class="row">
<div class="article col-md-4 col-sm-6 col-xs-12">
<!-- content do not mind about this -->
<img src="https://1anh.com/500/0/EZYwYm5NdZIwlXo48tMBufykgNFiWK-L-tezFAefrD8IPsKLhxKtJUAmSHXcKDKquTPJdB4_Yv0tchSQ55rygN0klG72bfCD-H1EqJIbU1kS4eICHfb19JfeGGp3QZ-s" title="" alt="" class="img-responsive">
<div class="content">
<h3 class="title"><a target="_blank" href="project-page.html">Project Tile</a></h3>
<p class="snippet">Fifth abundantly made Give sixth hath. Cattle creature i be don't them. </p>
<div class="feed-action">
<a href="#"><span class="like-count">80</span> Likes</a>
<span> </span>
<a href="#"><span class="comment-count">3</span> Comments</a>
</div>
<div class="tags">
From <a class="cap" href="#">Dresses</a>
<span> </span> Discover <a class="cap" href="#">White Themes</a>
</div>
</div>
<!-- /end content -->
</div>
<div class="article col-md-4 col-sm-6 col-xs-12">
<!-- content do not mind about this -->
<img src="https://1anh.com/500/0/EZYwYm5NdZIwlXo48tMBufykgNFiWK-L-tezFAefrD8IPsKLhxKtJUAmSHXcKDKquTPJdB4_Yv0tchSQ55rygN0klG72bfCD-H1EqJIbU1kS4eICHfb19JfeGGp3QZ-s" title="" alt="" class="img-responsive">
<div class="content">
<h3 class="title"><a target="_blank" href="project-page.html">Project Tile</a></h3>
<p class="snippet">Fifth abundantly made Give sixth hath. Cattle creature i be don't them. </p>
<div class="feed-action">
<a href="#"><span class="like-count">80</span> Likes</a>
<span> </span>
<a href="#"><span class="comment-count">3</span> Comments</a>
</div>
<div class="tags">
From <a class="cap" href="#">Dresses</a>
<span> </span> Discover <a class="cap" href="#">White Themes</a>
</div>
</div>
<!-- /end content -->
</div>
<!-- /end col -->
<!-- larger text -->
<div class="article col-md-4 col-sm-6 col-xs-12">
<h3><a href="article-page.html clickable">This is a very long article</a></h3>
<a href="article-page.html" target="_blank">
<p class="intro clickable text-preset">Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made Have bring.Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made
</p>
</a>
<hr>
<div class="article-meta">
<div class="feed-action">
<a href="#"><span class="like-count">80</span> Likes</a>
<span> </span>
<a href="#"><span class="comment-count">3</span> Comments</a>
</div>
<div class="tags">
From <a href="#" class="cap">Dresses</a>
<span> </span> Discover <a href="#" class="cap">White Themes</a>
</div>
</div>
<!-- / end article-meta -->
</div>
<!-- next line -->
<div class="article col-md-4 col-sm-6 col-xs-12">
<!-- content do not mind about this -->
<img src="https://1anh.com/500/0/EZYwYm5NdZIwlXo48tMBufykgNFiWK-L-tezFAefrD8IPsKLhxKtJUAmSHXcKDKquTPJdB4_Yv0tchSQ55rygN0klG72bfCD-H1EqJIbU1kS4eICHfb19JfeGGp3QZ-s" title="" alt="" class="img-responsive">
<div class="content">
<h3 class="title"><a target="_blank" href="project-page.html">Project Tile</a></h3>
<p class="snippet">Fifth abundantly made Give sixth hath. Cattle creature i be don't them. </p>
<div class="feed-action">
<a href="#"><span class="like-count">80</span> Likes</a>
<span> </span>
<a href="#"><span class="comment-count">3</span> Comments</a>
</div>
<div class="tags">
From <a class="cap" href="#">Dresses</a>
<span> </span> Discover <a class="cap" href="#">White Themes</a>
</div>
</div>
<!-- /end content -->
</div>
<div class="article col-md-4 col-sm-6 col-xs-12">
<!-- content do not mind about this -->
<img src="https://1anh.com/500/0/EZYwYm5NdZIwlXo48tMBufykgNFiWK-L-tezFAefrD8IPsKLhxKtJUAmSHXcKDKquTPJdB4_Yv0tchSQ55rygN0klG72bfCD-H1EqJIbU1kS4eICHfb19JfeGGp3QZ-s" title="" alt="" class="img-responsive">
<div class="content">
<h3 class="title"><a target="_blank" href="project-page.html">Project Tile</a></h3>
<p class="snippet">Fifth abundantly made Give sixth hath. Cattle creature i be don't them. </p>
<div class="feed-action">
<a href="#"><span class="like-count">80</span> Likes</a>
<span> </span>
<a href="#"><span class="comment-count">3</span> Comments</a>
</div>
<div class="tags">
From <a class="cap" href="#">Dresses</a>
<span> </span> Discover <a class="cap" href="#">White Themes</a>
</div>
</div>
<!-- /end content -->
</div>
<!-- /end col -->
<!-- larger text -->
<div class="article col-md-4 col-sm-6 col-xs-12">
<h3><a href="article-page.html clickable">This is a very long article</a></h3>
<a href="article-page.html" target="_blank">
<p class="intro clickable text-preset">
Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made Have bring.Fifth abundantly made Give sixth hath. Cattle creature i be don't them behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made behold green moved fowl Moved life us beast good yielding. Have bring.Fifth abundantly made
</p>
</a>
<hr>
<div class="article-meta">
<div class="feed-action">
<a href="#"><span class="like-count">80</span> Likes</a>
<span> </span>
<a href="#"><span class="comment-count">3</span> Comments</a>
</div>
<div class="tags">
From <a href="#" class="cap">Dresses</a>
<span> </span> Discover <a href="#" class="cap">White Themes</a>
</div>
</div>
<!-- / end article-meta -->
</div>
<!-- next line -->
</div>
<!-- /end row -->
</div>
<!-- / end container -->
div.container { margin-top: 10px; }
a, a:hover, a:active { color:#e46c73; }
a p.intro { color: #181816; }
div.article {
/* we need this to keep the article block has the same height */
min-height: 400px;
}
div.article h3 { margin:0 10px 10px 0; }
div.col-test { border: 1px solid green; }
