使用Bootstrap，我需要替换Div的顺序

Question

我的引导代码如下所示。

<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媒体查询，以定位of sm-4在手机上的col 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>

​

Answer 2

将您的代码更改为：

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

应该能行得通。