Bootstrap grid system layout 2 : 1

Question

how can I create a grid with following design

--------------------  -------------------------------
|    Content 1     |  |                             |
------  hr ---------  |          Content 3          |
|    Content 2     |  |                             |
--------------------- -------------------------------

I have this code but it pushes the content 2 below the content 3

<div class="col-md-5 well">
<form class="form-horizontal">
    <div class="form-body">
        <div class="form-group">
            //text
        </div>
        <div class="form-group">
            //text
        </div>
    </div>
</form>
</div>
<div class="col-md-7 well">
  <div style="height: 600px;"></div>
</div>
<hr style=" border: 0;
        height: 1px;
        background: #333;
        background-image: linear-gradient(to right, #ccc, #333, #ccc);">
<div class="well pre-scrollable" style="max-height: 350px !important;">
   hello 
</div>

NOTE

Content 1 is the div with form
Content 2 is the div with hello inside
Content 3 is the div with height specified

Searched the internet but couldn't find any guide.. any help given really appreciated. thank you :)

Answer 1

Try this, this should give you the result you're looking for:

<div class ="row">
  <div class = "col-lg-4">
    <div class = "col-lg-12">
      Content 1
    </div>
    <hr />
    <div class = "col-lg-12">
      Content 2
    </div>
  </div>
  <div class = "col-lg-8">
    Content 3
  </div>
</div>