Question

我在col-md-4(1)中有3 col-md-4(2) col-md-4(3) col-md-12。在手机或平板电脑。我想首先显示中间col-md-4(2)，然后col-md-4(1) col-md-4(3)。如何在引导程序中正确执行此操作？

<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>

当您的列为全宽时（在您的情况下，低于push），您无法使用pull和md，因此您必须在DOM中以正确的顺序启用它们才能启动用。

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

1 个答案: