如果在小型设备中更改列顺序

Question

我有一行有两列，每行使用col-md-6 col-sm-12，所以如果在一个小设备中，每列将使用整个宽度并强制换行。但是，我需要在小屏幕中查看时更改这些列的顺序（第一列必须在第二列之后显示）。

我尝试使用以下代码，但第一列的位置甚至更改为桌面。

<div id="panel-details" class="row">
    <div class="col-md-6 col-sm-12 col-sm-push-12">
        <ul class="video-details">
            <li class="video-title">
                Title
            </li>
            <li class="video-author">
                Name
            </li>
            <li class="video-description">
                Description
            </li>
        </ul>
    </div>
    <div class="col-md-6 col-sm-12 col-sm-pull-12">
        &nbsp;
    </div>
</div>

Answer 1

您需要先将第二个列放在第一个列之前，以便在较小的视口中以该顺序显示，然后再次{em}重新768px 第二个列将向右移动，第一个在左侧。此外，您需要将推/拉类应用于 col-md-6 ，而不是 col-sm-6 。移动优先！

请参阅Column ordering

工作示例：

＆＃13;

＆＃13;

<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-6 col-md-push-6 col-sm-12">
      <div class="alert alert-info">
        Second
      </div>
    </div>

    <div class="col-md-6 col-md-pull-6 col-sm-12">
      <ul class="video-details list-unstyled">
        <li class="video-title">
          <div class="alert alert-danger">
            First 1
          </div>
        </li>
        <li class="video-author">
          <div class="alert alert-danger">
            First 2
          </div>
        </li>
        <li class="video-description">
          <div class="alert alert-danger">
            First 3
          </div>
        </li>
      </ul>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;