css - Bootstrap : Clutter Columns In Concurrent Use Push & Pull Column Ordering

Question

我在并发使用 Push 和 Pull 列排序类时遇到问题。

I Want Ordering Columns Like This:

But Result In md & Larger Screen Size is

<section style="direction:rtl;">
<div class="container">
<div class="row">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-4 col-sm-push-8 col-md-3 col-md-push-9"><div class="well">Column 1</div></div>
      <div class="col-sm-4 col-sm-push-0 col-md-3 col-md-push-3"><div class="well">Column 2</div></div>
      <div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-3"><div class="well">Column 3</div></div>
      <div class="col-sm-4 col-sm-push-8 col-md-3 col-md-pull-9"><div class="well">Column 4</div></div>
      <div class="col-sm-4 col-sm-push-0 col-md-3 col-md-push-9"><div class="well">Column 5</div></div>
      <div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-push-3"><div class="well">Column 6</div></div>
      <div class="col-sm-4 col-sm-push-8 col-md-3 col-md-pull-3"><div class="well">Column 7</div></div>
      <div class="col-sm-4 col-sm-pull-0 col-md-3 col-md-pull-9"><div class="well">Column 8</div></div>
      <div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-push-9"><div class="well">Column 9</div></div>
      <div class="col-sm-4 col-sm-push-8 col-md-3 col-md-push-3"><div class="well">Column 10</div></div>
      <div class="col-sm-4 col-sm-pull-0 col-md-3 col-md-pull-3"><div class="well">Column 11</div></div>
      <div class="col-sm-4 col-sm-pull-8 col-md-3 col-md-pull-9"><div class="well">Column 12</div></div>
    </div>
  </div>
</div>

Answer 1

您需要重置从 sm 屏幕继承的 md 和 lg 屏幕的推和拉。

<div class="col-sm-4 col-sm-push-8 **col-md-push-0** col-md-3 col-md-pull-9"><div class="well">Column 4</div></div>

http://www.bootply.com/1NedaZMxUf