我认为仅使用bootstrap是不可能，因为它使用灵活布局基类，而且它不能做您想要的事情（如果我错了，请纠正我，自从v4发布以来，我还没有接触过bootstrap）。
因此，我在这里建议的是一个自定义网格布局基类到所有3个查尔兹的父div，你可以使用它与媒体查询，以自定义布局的方式，你想要的。所有其他引导类仍然可以使用正常否则。基本上我创建一个表一样的区域与预定义的部分，然后我'附加'的孩子到他们的期望位置。

• HTML格式

<div class="container">
    <div class="row grid">
        <div class="col_a col-6 col-md-12">Col A</div>
        <div class="col_b col-6 col-md-12">Col B</div>
        <div class="col_c col-12">Col C</div>
    </div>
</div>

• CSS样式表

.col_a {
    background: red;
}
.col_b {
    background: yellow;
}
.col_c {
    background: green;
}
@media screen and (min-width: 768px) {
    .grid {
        display: grid;
        grid-template-areas: "left right-top" "left right-bottom";
    }
    .col_a {
        grid-area: left;
    }
    .col_b {
        grid-area: right-top;
    }
    .col_c {
        grid-area: right-bottom;
    }
}

Demo - resize screen to see the effect。