jquery - 使用 Bootstrap，我需要替换我的 div 的顺序

Question

我的 Bootstrap 代码如下。

<div class="container">
  <div class="row">
    <div class="col-sm-4">
    </div>
    <div class="col-sm-8">
    </div>
   </div>
   <div class="row">
     <div class="col-sm-8">
     </div>
     <div class="col-sm-4">
     </div>
   </div>
</div>

我需要有关创建 CSS 媒体查询以将 col-sm-4 定位在手机上 col-sm-8 之上的帮助。谢谢!

Answer 1

您可以使用重新排序类来执行此操作。查看Docs .

查看工作示例片段

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <h3>With Reordering</h3>
  <div class="row">
    <div class="col-sm-4">
      <div class="alert alert-warning">UPPER 1
      </div>
    </div>
    <div class="col-sm-8">
      <div class="alert alert-danger">LOWER 1
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-4 col-sm-push-8">


      <div class="alert alert-info">LOWER 2
      </div>
    </div>
    <div class="col-sm-8 col-sm-pull-4">
      <div class="alert alert-danger">UPPER 2

      </div>
    </div>
  </div>
</div>
<hr>
<div class="container">
  <h3>
    Without Reordering
  </h3>
  <div class="row">
    <div class="col-sm-4">
      <div class="alert alert-warning">UPPER 1
      </div>

    </div>
    <div class="col-sm-8">
      <div class="alert alert-danger">LOWER 1
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8">
      <div class="alert alert-danger">UPPER 2
      </div>
    </div>
    <div class="col-sm-4">
      <div class="alert alert-info">LOWER 2

      </div>
    </div>
  </div>
</div>