推拉引导网格

Question

所需网格xs屏幕为sm

我试图在其他网格中重新排序网格，在蓝色部分旁边放置一个嵌套网格。这是我现在的代码，但推拉会导致橙色方块消失。

Org-mode version 8.3.3 (8.3.3-51-g30bcff-elpa)

Answer 1

我认为单独使用push和pull课程无法做到这一点。

这些类仅向元素添加相对left和right CSS属性，因此您无法上下移动元素。

我相信您必须复制内容并隐藏\基于view-port显示它。

像这样......

<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％肯定）。