Bootstrap Column layout with content - css

Question

How to create a layout using bootstrap similar on the image below? In web the first column indicate as their label (Developer, Project Overview, etc) and the succeeding columns is their description on different items. On mobile must be vertically align together with their content. Just want a started code using bootstrap 3 on how to make a layout just like on the image and I will make the rest.
This is my sample code but when it view on mobile is different on what I've wanted . I want a design just like on the image above.
<div class="row bg-highlight">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 first">
<h4>Project</h4>
</div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<h4>BRIO TOWER</h4>
<img src="http://placehold.it/900x600" alt="img" title="U-Travel Services Inc" class="img-responsive thumbnail" >
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<h4>BRIO TOWER</h4>
<img src="http://placehold.it/900x600" alt="img" title="U-Travel Services Inc" class="img-responsive thumbnail" >
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<h4>BRIO TOWER</h4>
<img src="http://placehold.it/900x600" alt="img" title="U-Travel Services Inc" class="img-responsive thumbnail" >
</div>
</div>
</div>
</div>
<div class="row bg-light-gray">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 first">
<h5>Developer</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p>DMCI Homes</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p>SMDC</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p>AVIDA LAND</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12 first">
<h5>Project Overview</h5>
</div>
<div class="col-lg-10 col-md-10 col-sm-10 col-xs-12">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
</div>
</div>
</div>
</div>

Answer 1

This is a good start for the basic markup you should use. If you are needing those labels on the left to line up with each block of text, it may need to be revised.
HTML
<div class="container">
<div class="row">
<div class="col-sm-12">
<h1>Compare Property</h1>
<hr>
<p>Use this document as a way to quickly start any new project. All you get is this text and a mostly barebones HTML document.</p>
</div>
</div>
<div class="row with-images">
<div class="col-sm-3 hidden-xs">
<p class="descriptions">X</p>
<p class="descriptions">Developer</p>
<p class="descriptions">Overview</p>
<p class="descriptions">Location</p>
</div>
<div class="col-sm-3">
<div class="image-wrap">
<img src="http://placehold.it/900x600">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet lectus a facilisis iaculis. Morbi nec velit pharetra, commodo velit et, varius elit. Mauris at tincidunt nisl, quis sollicitudin tellus. In ac hendrerit leo, in congue dolor. Curabitur nec elit vitae ligula semper eleifend. Suspendisse molestie dignissim feugiat. Pellentesque consectetur nulla urna, sagittis rutrum eros tristique ac. Donec commodo ultrices justo, quis tempor erat aliquet id. </p>
<p>Etiam non est semper, cursus arcu quis, finibus neque. Aliquam blandit ante mollis urna accumsan, ullamcorper malesuada nulla fringilla. Suspendisse potenti. Nullam vehicula mauris id nulla interdum pretium. Morbi sollicitudin cursus quam, tincidunt ultrices massa faucibus et. Sed cursus sollicitudin erat, vitae eleifend lectus cursus sed. Nam tempor libero vitae nibh bibendum laoreet. Maecenas dictum ex nec urna rutrum laoreet. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Pellentesque congue ultricies ex, ac porttitor urna mollis tristique. Donec condimentum accumsan lacus sed dictum. Pellentesque sagittis accumsan congue.</p>
</div>
<div class="col-sm-3">
<div class="image-wrap">
<img src="http://placehold.it/900x600">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet lectus a facilisis iaculis. Morbi nec velit pharetra, commodo velit et, varius elit. Mauris at tincidunt nisl, quis sollicitudin tellus. In ac hendrerit leo, in congue dolor. Curabitur nec elit vitae ligula semper eleifend. Suspendisse molestie dignissim feugiat. Pellentesque consectetur nulla urna, sagittis rutrum eros tristique ac. Donec commodo ultrices justo, quis tempor erat aliquet id. </p>
<p>Etiam non est semper, cursus arcu quis, finibus neque. Aliquam blandit ante mollis urna accumsan, ullamcorper malesuada nulla fringilla. Suspendisse potenti. Nullam vehicula mauris id nulla interdum pretium. Morbi sollicitudin cursus quam, tincidunt ultrices massa faucibus et. Sed cursus sollicitudin erat, vitae eleifend lectus cursus sed. Nam tempor libero vitae nibh bibendum laoreet. Maecenas dictum ex nec urna rutrum laoreet. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Pellentesque congue ultricies ex, ac porttitor urna mollis tristique. Donec condimentum accumsan lacus sed dictum. Pellentesque sagittis accumsan congue.</p>
</div>
<div class="col-sm-3">
<div class="image-wrap">
<img src="http://placehold.it/900x600">
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam imperdiet lectus a facilisis iaculis. Morbi nec velit pharetra, commodo velit et, varius elit. Mauris at tincidunt nisl, quis sollicitudin tellus. In ac hendrerit leo, in congue dolor. Curabitur nec elit vitae ligula semper eleifend. Suspendisse molestie dignissim feugiat. Pellentesque consectetur nulla urna, sagittis rutrum eros tristique ac. Donec commodo ultrices justo, quis tempor erat aliquet id. </p>
<p>Etiam non est semper, cursus arcu quis, finibus neque. Aliquam blandit ante mollis urna accumsan, ullamcorper malesuada nulla fringilla. Suspendisse potenti. Nullam vehicula mauris id nulla interdum pretium. Morbi sollicitudin cursus quam, tincidunt ultrices massa faucibus et. Sed cursus sollicitudin erat, vitae eleifend lectus cursus sed. Nam tempor libero vitae nibh bibendum laoreet. Maecenas dictum ex nec urna rutrum laoreet. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Pellentesque congue ultricies ex, ac porttitor urna mollis tristique. Donec condimentum accumsan lacus sed dictum. Pellentesque sagittis accumsan congue.</p>
</div>
</div>
</div><!-- /.container -->
CSS
.with-images img {
max-width:100%;
height:auto;
}
.image-wrap {
margin-bottom:15px;
}
Example on Bootply