Bootstrap的推拉类不起作用？

Question

在小型设备上订购：

1
2
3
4

在桌面设备上是：

1
3
2
4

我的代码：

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div id="sidebar-right" class="col-lg-6 col-sm-6">
      <h3 class="title">1</h3>
    </div>
    <div id="content" class="col-lg-6 col-sm-6 col-lg-push-6">
      <h2>2</h2>
    </div>
    <div id="sidebar-left" class="col-lg-6  col-sm-6 col-lg-pull-6">
      <h2>3</h2>
    </div>
    <div id="sidebar-right" class="col-lg-6 col-sm-6">
      <h2>4</h2>
    </div>
  </div>
</div>

Answer 1

  

Bootstrap的push和pull类不用于水平交换   垂直。

您需要自定义样式。

方法＃01 - Flexbox：

可以使用CSS3 flexbox来制作它。我们需要在div中包装中间两个元素（需要交换）。

<强> HTML：

<div class="container">
  <div class="elem">1</div>
  <div class="holder">
    <div class="elem">2</div>
    <div class="elem">3</div>
  </div>
  <div class="elem">4</div>
</div>

必要的CSS：

.holder {
  flex-direction: column;
  display: flex;
}

@media (min-width: 992px) {
  .holder {
    flex-direction: column-reverse;
  }
}

.container .elem {
  border: 1px solid black;
  margin-bottom: 5px;
  padding: 3px 5px;
}

.holder {
  flex-direction: column;
  display: flex;
}

@media (min-width: 992px) {
  .holder {
    flex-direction: column-reverse;
  }
}

<div class="container">
  <div class="elem">1</div>
  <div class="holder">
    <div class="elem">2</div>
    <div class="elem">3</div>
  </div>
  <div class="elem">4</div>
</div>

方法＃02 - 表属性：

如果还需要旧版浏览器的支持，那么您可以使用css表属性：

<强> HTML：

<div class="container">
  <div class="elem">1</div>

  <div class="holder">
    <div class="elem">2</div>
    <div class="elem-holder">
      <div class="elem">3</div>
    </div>
  </div>

  <div class="elem">4</div>
</div>

必要的CSS：

.holder {
  display: table;
  width: 100%;
}

@media (min-width: 992px) {
  .holder .elem-holder {
    display: table-header-group;
    overflow: hidden;
    width: 100%;
    height: 1%;
  }
}

.container .elem {
  border: 1px solid black;
  margin-bottom: 5px;
  padding: 3px 5px;
}

.holder {
  display: table;
  width: 100%;
}

@media (min-width: 992px) {
  .holder .elem-holder {
    display: table-header-group;
    overflow: hidden;
    width: 100%;
    height: 1%;
  }
}

<div class="container">
  <div class="elem">1</div>
  <div class="holder">
    <div class="elem">2</div>
    <div class="elem-holder">
      <div class="elem">3</div>
    </div>
  </div>
  <div class="elem">4</div>
</div>