Twitter bootstrap 引导：将一个div放置在另外两个div旁边

我最近开始使用Twitter的Bootstrap

---

如何将一个div（#3）放在其他两个div（#1和#2）的旁边，以便右侧的div与其他两个div在垂直方向上一样高/一样大

到目前为止，我的代码是：

    <div class="row">
    <div class="form-group col-md-8">
        <label for="1">1</label>
        <input type="text" id="1" class="form-control" placeholder="1">
    </div>
    <div class="form-group col-md-8">
        <label for="2">2</label>
        <textarea id="2" class="form-control" rows="10"></textarea>
    </div>
    <div class="col-md-4">
        <img src="http://placehold.it/250x250&text=Map" />
        <input type="text" id="geo" class="form-control" placeholder="3">
    </div>
</div>

1.
2.

---

我在这里开始摆弄：

我嵌套了堆叠的两个div，并将它们左对齐，class=“pull left”已更新

标题
描述

有一种更具语义的方法可以做到这一点（仅当我发现这个问题正在寻找解决方案时才发布）

首先，您需要了解网格系统的基本知识，然后实现非常简单，只需在一行中设置两个相邻的div，然后在其中一个div中设置一个包含两个div的行。例如：

<div class="container">
    <div class="row">
        <div class="col-lg-6">
        </div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-12">
                </div>
                <div class="col-lg-12">
                </div>
            </div>
        </div>
    </div>
<div>

制作类似于：

---

不确定这是如何与多个堆叠行交互的，但有许多有趣的答案。如果这些有效，这可能是重复的。“因此右侧的div与其他两个div在垂直方向上一样高/大”-您的答案不符合此要求。然后您需要设置元素的高度，使其具有相同的高度，ie div1 height+div2 height=div3 height，或者我刚刚更新了我的小提琴，以减少div#2中的行数。现在请检查，div3的底部与div2的底部不对齐。我怎样才能做到这一点？

<div class="container">
    <div class="row">
        <div class="col-lg-6">
        </div>
        <div class="col-lg-6">
            <div class="row">
                <div class="col-lg-12">
                </div>
                <div class="col-lg-12">
                </div>
            </div>
        </div>
    </div>
<div>