html - 可以在响应中更改 bootstrap col div 的顺序吗？

Question

我有 3 个 col-md-4(1) col-md-4(2) col-md-4(3) 在 col-md-12 中。在手机或平板电脑中。我想先显示中间的 col-md-4(2) 然后再显示 col-md-4(1) col-md-4(3)。如何在 Bootstrap 方面正确执行此操作？

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-4">
          <p>abcd</p>
      </div>
      <div class="col-md-4">
        <p>xyzs</p>
      </div>
      <div class="col-md-4">
         <p>mnop</p>
      </div>
    </div>
  </div>
</div>

Answer 1

重新排序前两列并使用 col-xx-push 和 col-xx-pull 在大屏幕上重新定位:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">


<div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="col-md-4 col-md-push-4">
        <p>Column 2</p>
      </div>
      <div class="col-md-4 col-md-pull-4">
        <p>Column 1</p>
      </div>
      <div class="col-md-4">
        <p>Column 3</p>
      </div>
    </div>
  </div>
</div>

当你的列是全宽时(在你的情况下，低于 md)你不能使用 push 和 pull 所以你必须有它们在 DOM 中以正确的顺序开始。