html - 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's push and pull classes are for horizontal swapping not vertical.

您需要为此自定义样式。

方法 # 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>