Bootstrap 3网格布局推/拉列失败

Question

我正在构建我的第一个引导网格布局，因为我一遍又一遍地阅读，我需要先将网格设为Mobile，所以我这样做了。现在我正在努力确保我所制作的网格正在按照我想要的方式在更大的屏幕中进行调整，这包括我的很多列的不同定位。不幸的是，即使我试图找到这样做的方法，我还没有成功完成我的计划。我希望这里有人可以提供帮助。这是我的网格，显然这个在移动设备上的定位是正确的，并且因为我没有完成推拉而在小而大的可怕：

<div class="container">
  <div class="col-xs-12 col-sm-4">1</div>
  <div class="col-xs-12 col-sm-4">2</div>
  <div class="col-xs-12 col-sm-5">3</div>
  <div class="col-xs-12 col-sm-3">4</div>
  <div class="col-xs-12 col-sm-8">5</div>
  <div class="col-xs-12 col-sm-4">6</div>
  <div class="col-xs-12 col-sm-12">7</div>
</div>

我想要实现的目标如下： http://i.stack.imgur.com/1rVnN.png

[      2      ][              5               ]
[      1      ][         3         ][    4    ]
[      6      ][         3         ][    4    ]
[                      7                      ]

我希望任何对此有丰富经验的人都可以帮助我建立我的网格来实现这一目标。否则我可能不得不添加更多的块（一些双块）并将它们隐藏在媒体查询中，我希望它们的位置不同。