<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="row-fluid">
    <div class="span5">
        <div class="well">
            B
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
    <div class="span7">
        <div class="well">
            C
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>
        </div>
    </div>
</div>
<div class="row-fluid">
    <div class="span5">
        <div class="well">
            A
        </div>
    </div>
</div>

html, body {
  padding: 0;
  margin: 0;
  height: 100%; /* This is to make the height percentages work */
}

.A, .B, .C { /* This is just to show the boxes */
  box-sizing: border-box;
  border: 3px solid silver;
  border-bottom-color: black;
  border-right-color: black;
}

.C {
  width: 58.33%; /* 7/12, rounded down */
  height: 100%; /* Relative to parent. Have a look at `vh` instead of % for viewport height */
  float: right; /* Float to the right, so A and B will move left of C*/
}
.B,
.A {
  width: 41.66%; /* 5/12, rounded down  */
}
.B {
  height: 83.33%; /* 5/6, Relative to parent (= body) */
}
.A {
  height: 16.66%; /* 1/6 */
}

<div class="C">C</div>
<div class="B">B</div>
<div class="A">A</div>