html - xs 中的 Bootstrap 网格

Question

我正在使用 Bootstrap 网格，如下所示:

<div class="row">
  <div class="col-md-6 col-sm-12"> Column A </div>
  <div class="col-md-6 col-sm-12"> Column B </div>
</div>

这显然在左侧显示 A 列，在右侧显示 B 列。当移动到较小的屏幕时，A 在上，B 在下。

有没有办法在大屏幕上保持 A 在左 B 在右，但在小屏幕上让 B 在上而 A 在下？

谢谢。

Answer 1

您可以使用 Bootstrap Push and Pull .

body,
html {
  padding-top: 50px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container text-center">
  <div class="row">
    <div class="col-md-6 col-md-push-6">
      <div class="alert alert-info">B</div>
    </div>
    <div class="col-md-6 col-md-pull-6">
      <div class="alert alert-danger">A</div>
    </div>
  </div>
</div>