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

2023年4月19日 180次阅读

我有一行有两列,每列使用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>

《css – 如果在小型设备中更改列顺序》

最佳答案 您需要在第一列之前放置第二列,以便在较小的视口上按此顺序显示,然后一旦超过768px,第二列将向左移动,第一列将向右移动.此外,您需要将推/拉类应用于col-md-6,而不是col-sm-6.手机第一！

见Column ordering

工作实例：

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