Bootstrap 网格对齐问题

Issues with Bootstrap Grid Alignment

我需要这个布局(见图),我尝试了很多但没有任何效果..这是我的代码:

<div class="row content-container">

            <div class="col-md-9" id="map-content">
            <h1>#Map</h1>

        </div> <!-- MAP -->

        <div class="col-md-3" id="route">
        <h1>#Route</h1>
        </div> <!-- Route -->

        <div class="col-md-9" id="breadcrumbs">
        </div> <!-- Breadcrumbs -->


    </div> <!--Row Content--> 

查看 this fiddle

<div class="container">

  <div class="row ">

    <div class="col-xs-6">
      <div class="col-xs-12" style="background: green; height: 60px;">Aaa</div>
      <div class="col-xs-12" style="background: red; height: 60px;">Bbb</div>
    </div>
      <div class="col-xs-6" style="background: blue; height: 120px;">Bbb</div>

  </div>  

</div>