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

【问题标题】：Bootstrap 3 grid layout push/pull columns failBootstrap 3网格布局推/拉列失败
【发布时间】：2015-12-09 18:30:25
【问题描述】：

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

<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                      ]

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

【问题讨论】：

这是不可能的，push 和 pull css 类只能水平移动列，它们永远不会换行。但是，您可以复制列的内容，并为移动设备和大屏幕设置一个布局。（顺便说一句，.container 和列类之间应该始终有一个 .row div）
谢谢 ckujjer，我想了很多。我现在正试图通过复制内容并制作移动和更大的屏幕布局来弄清楚我的设计。但是，我遇到了一些小问题，即移动设备的元素没有隐藏或我的桌面项目没有隐藏。明天我会继续努力，看看我能不能走得更远，
您的目标浏览器是什么？ Flexbox 可以做到这一点，但您需要针对 IE9 及更低版本（可能是 JS polyfill）采用不同的策略。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这可能是你的想法https://jsfiddle.net/9urovfLa/2/

<div class="container">
<div class="row">
    <div class="col-sm-4 blue"></div>
    <div class="col-sm-8 yellow"></div>
</div>

<div class="row">
    <div class="col-sm-4 green"></div>
    <div class="col-sm-6 red"></div>
    <div class="col-sm-2 black"></div>
</div>

<div class="row">
    <div class="col-sm-4 blue"></div>
    <div class="col-sm-6 green"></div>
    <div class="col-sm-2 yellow"></div>
</div>

<div class="row">
    <div class="col-sm-12 black"></div>
</div>
</div>

【讨论】：

这确实是我的桌面设计所需要的，但不适用于移动设备。由于现在排序不正确（上面的网格是先写桌面而不是移动。