Html 引导式更改结构，实现快速响应视图

我在web视图中有以下内容

我希望在响应视图中显示以下结构

我如何在单一结构的两个视图中实现这一点

<div class="left">
    <div class="row">1</div>
    <div class="row">2</div>
    <div class="row">3</div>
</div>
<div class="right">
    <div class="row">4</div>
</div>

---

单靠引导无法实现完美的对齐。你的CSS看起来不错，但是你需要更新你的HTML。您可以在此处查看小提琴：。这是我组织HTML的方式：

<div class="container">
    <div class="row">
        <div class="blue col-xs-4"></div>
        <div class="green col-xs-8"></div>
        <div class="yellow col-xs-4"></div>
        <div class="red col-xs-4"></div>
    </div>
</div>

---

我希望这能有所帮助。祝你好运

问题已更新。请检查并查看官方文档（网格和推/拉操作）：

<div class="container">
    <div class="row">
        <div class="blue col-xs-4"></div>
        <div class="green col-xs-8"></div>
        <div class="yellow col-xs-4"></div>
        <div class="red col-xs-4"></div>
    </div>
</div>