Html 我怎么能用Boostrap获得这个网格？

我要做的是使用Bootstrap和AngularJS进行划分

我不知道如何做的是划分，我想把容器分成3列4列。还想知道我是否可以将容器拆分为两列6，并重叠另一个div以形成扇区3

这是我之前说过的，但这并没有给我想要的

<div class="container" contenteditable="false">
    <div class="col-md-6 text-center">
        <button class="btn btn-default">Button</button>
    </div>
    <div class="col-md-6 text-center">
        <button class="btn btn-default">Button</button>
    </div>
</div>

按钮
按钮

编辑1

还想知道在智能手机上加载网站时如何获得这种响应能力

HTML:

对于响应式样式更改，您需要添加媒体查询：

@media (max-width: 768px) {
        .section3, .section2, .section1 {
            display:block;
            position: relative;

        }
        .section3 {
            height: 10%;
            width: 100%
        }
        .section2 {
            height:60%;
            width: 100%
        }
        .section1 {
            height: 30%;
            width: 100%
        }

    }

---

真的非常感谢，我对原来的帖子进行了编辑，我也想让它更具响应性。如果你能帮助我，我会把你的答案设为正确答案：D

/* Reset */
html, body { height: 100%; margin: 0; padding: 0; }


.container { 
  display: table; 
  width: 100%; 
  height: 100%; 
}

.content { 
  display: table-row; 
  height: 100%; 
}

.content-body { 
  display: table-cell; 
}

.section1 {
  width: 50%;
  background: red;
  height: 100%;
  display:block;
}

.section2 {
  width: 50%;
  height: 50%;
  height: 100%;
  display: block;
  background: blue;
}

.section3 {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  height: 50%;
  width: 50%;
  background: yellow;
}

@media (max-width: 768px) {
        .section3, .section2, .section1 {
            display:block;
            position: relative;

        }
        .section3 {
            height: 10%;
            width: 100%
        }
        .section2 {
            height:60%;
            width: 100%
        }
        .section1 {
            height: 30%;
            width: 100%
        }

    }