需要帮助引导嵌套网格4列3左1右

Question

我正在尝试制作一个联系页面，但无法在当前位置创建第三列。请看我附上的图片。我需要4列-3左1右引导栅格

举个例子，我想要做的是：

<div class="contact-border col-xs-11">
<div class="row">
    <div class="col-xs-6">
        <div class="row">
<div class="col-xs-9">
 <table class="table">
    <tbody>
      <tr>
        <td align="left">Address
</td>
      </tr>
      <tr>
        <td align="left">Icon</td>
        <td valign="middle">Phone</td>
      </tr>
<tr>
<td align="left">Icon</td>
<td>email</td>
</tr>
    </tbody>
  </table>
</div>
        </div>
        <div class="row">
            <div class="col-xs-12">
                    <ul class="social-network social-circle">
                      Social Icons
                    </ul>   
            </div>
        </div>
    </div>
    <div class="col-xs-10">
Contact Form
    </div>
</div>
</div>
....................
. 1 . 2 .          .
. .......     4    .
.       .          .
.   3   .          .
....................

Answer 1

这应该使用引导网格系统来完成。

<div class="row">
    <div class="col-xs-4">
        <div class="row">
            <div class="col-xs-3">
            1
            </div>
            <div class="col-xs-9">
            2
            </div>
        </div>
        <div class="row">
            <div class="col-xs-12">
            4
            </div>
        </div>
    </div>
    <div class="col-xs-8">
    3
    </div>
</div>

将其添加到css中，使右列(3)与左列(1、2、4)相等。

.row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display:         flex;
}