推拉自举网格答案

【问题标题】：Push and Pull Bootstrap Grid推拉自举网格
【发布时间】：2016-05-22 13:27:07
【问题描述】：

所需的网格 xs 屏幕到 sm

我正在尝试重新排列我的网格，以便在蓝色部分旁边放置一个嵌套网格。这是我现在的代码，但是推拉会导致橙色方块消失。

<div class="row">
  <div class="test-slider col-sm-6 col-sm-push-0">Slider</div>
  <div class="test-quickhelp col-sm-12 col-sm-push-6">QuickHelp</div>
  <div class="test-square-top col-sm-6 col-sm-pull-12">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">s1</div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">s1</div>
    </div>
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">s1</div>
      <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">s1</div>
    </div>
  </div> 
</div>

【问题讨论】：

“推拉”是什么意思？
@Niek 他的意思是列排序 -> getbootstrap.com/css/#grid-column-ordering

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

【解决方案1】：

我不相信仅使用 push 和 pull 类是不可能的。

这些类只为元素添加相对的left 和right CSS 属性，因此您不能上下移动元素。

我相信您将不得不复制内容并根据视口隐藏\显示它。

这样的……

<div class="row">
  <div class="test-slider col-sm-6">Slider</div>
  <div class="test-square-top col-sm-6 hidden-xs">
    <div class="row">
      <div class="col-xs-6">s1</div>
      <div class="col-xs-6">s1</div>
    </div>
    <div class="row">
      <div class="col-xs-6">s1</div>
      <div class="col-xs-6">s1</div>
    </div>
  </div>
  <div class="test-quickhelp col-sm-12">QuickHelp</div>
  <div class="test-square-top col-xs-12 visible-xs-block">
    <div class="row">
      <div class="col-xs-6">s1</div>
      <div class="col-xs-6">s1</div>
    </div>
    <div class="row">
      <div class="col-xs-6">s1</div>
      <div class="col-xs-6">s1</div>
    </div>
  </div> 
</div>

JSFiddle

您可能想查看新的 Bootstrap 4 Alpha 版本。有一个选项可以打开 Flexbox Grid，这可能会在不复制内容的情况下实现这一点（不是 100% 肯定）。

【讨论】：