в bootstrap есть готовые классы для задания размеров блока при разном разрешении экрана. строка row по умолчанию "делится на 12 блоков". то есть для того, что бы на больших экранах было 3 столбца, на средних 2 столбца и на маленьких и столбец, для каждого столбца в row
нужно описать его поведение.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p></div>
<div class="col-lg-4 col-md-6 col-sm-12 col-xs-12"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p></div>
</div>
lg,md,sm,xs - соответственно размеры дисплеев (большой, средний, маленький, очень маленький). А -12 -6 -4 количество столбцов занимаемых блоком. Подробнее про них найдете в гугле.
Сделать границы блоку можно банально вложив в него блок с стилями:
<div style="border:1px solid #ccc">content</div>
Для выравнивания высоты блока есть много решений. Если количество текста отличается на "строку-две" можно для всех блоков с контентом задать min-height:400px;
(где 400 ваше значение) что бы вмещалось максимально допустимое количество строк.
Практически готовый пример:
<html>
<head>
<title>Bootstrap</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
.content-wrapper{
border:1px solid #ccc;
min-height: 300px;
}
.no-padding{
padding: 0;
}
.row{
margin:0;
}
</style>
</head>
<body>
<div class="row">
<div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="content-wrapper">
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p>
</div>
</div>
<div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="content-wrapper">
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p>
</div>
</div>
<div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="content-wrapper">
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis at aliquam neque nesciunt magnam nostrum temporibus quaerat numquam, magni laborum, asperiores earum dicta ratione ex, assumenda qui eligendi iusto ad perferendis distinctio. Maxime consectetur commodi corporis nemo consequatur! Aliquam vero culpa rem aperiam minus facilis ad. Exercitationem omnis velit necessitatibus rem odit cumque in at, consequatur perspiciatis inventore voluptatibus nostrum maiores? Aperiam qui, minima vel sapiente nam molestiae id distinctio laboriosam unde accusantium quia similique sint dolorum magni! Ullam, optio.</p>
</div>
</div>
<div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12 push-md">
<div class="content-wrapper">
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p>
</div>
</div>
<div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="content-wrapper">
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur non aliquam dolorem ipsam, ut accusantium.</p>
</div>
</div>
<div class="no-padding col-lg-4 col-md-6 col-sm-12 col-xs-12">
<div class="content-wrapper">
<h3>Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reiciendis at aliquam neque nesciunt magnam nostrum temporibus quaerat numquam, magni laborum, asperiores earum dicta ratione ex, assumenda qui eligendi iusto ad perferendis distinctio. Maxime consectetur commodi corporis nemo consequatur! Aliquam vero culpa rem aperiam minus facilis ad. Exercitationem omnis velit necessitatibus rem odit cumque in at, consequatur perspiciatis inventore voluptatibus nostrum maiores? Aperiam qui, minima vel sapiente nam molestiae id distinctio laboriosam unde accusantium quia similique sint dolorum magni! Ullam, optio.</p>
</div>
</div>
</div>
</body>
</html>