Как правильно верстать такие блоки?
Bootstrap 3.*:<div class="container">
  <div class="row">
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
    <div class="col-lg-3"></div>
  </div>
</div>
Ну для адаптивности используйте классы col-lg-* col-md-* col-sm-* col-xs-*
О чем конкретно речь то?
Тут 4 блока, значит делается что то вроде:<style>
.wrap {width:100%;margin: auto;}
.wrap .col {width:25%;float:left;}
</style>
<div class="wrap">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
</div>