How to achieve 3-5-4 grid layout by using Bootstrap?

I have been trying to create a grid layout as above with Bootstrap but couldn't figure out a way to do it, any suggestion?

Solution

This is mostly quite simple using nested rows. The problem comes if you want exactly 3/5 columns for the left two. You can get close by simply doing this which makes it almost right, is this enough?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-xs-8">
      <div class="row">
        <div class="col-xs-4">IMAGE1</div>
        <div class="col-xs-8">TEXT1</div>
      </div>
      <div class="row">
        <div class="col-xs-4">IMAGE2</div>
        <div class="col-xs-8">TEXT3</div>
      </div>
    </div>
    <div class="col-xs-4">SIDEBAR</div>
  </div>
</div>

If you need exactly 3/5/4 layout then then only sensible way to do it while still using Bootstrap would be to customise the grid system to get the granularity. In this case you need to make it a 24 column layout which would make your grid look like this:

<div class="container">
  <div class="row">
    <div class="col-xs-16">
      <div class="row">
        <div class="col-xs-9">IMAGE1</div>
        <div class="col-xs-15">TEXT1</div>
      </div>
      <div class="row">
        <div class="col-xs-9">IMAGE2</div>
        <div class="col-xs-15">TEXT3</div>
      </div>
    </div>
    <div class="col-xs-8">SIDEBAR</div>
  </div>
</div>