时间戳

首页 > 解决方案 > Bootstrap - 移动下一个

在以前的中小型设备之上

html - Bootstrap - 移动下一个
在以前的中小型设备之上

问题描述

div我有以下内容Bootstrap：

<div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0">
    <div class="d-flex justify-content-between align-items-center">
        <div class="h5 mb-0">Text text</div>
        <div class="text-right">
            <div class="actions">
                <a href="#" class="action-item"><i
                        class="far fa-heart mr-1"></i>
                    50</a>
                <a href="#" class="action-item"><i class="far fa-eye mr-1"></i>
                    250</a>
            </div>
        </div>
    </div>
    <p class="font-size-1">Text text text text text
    </p>
</div>

在中小型设备上，我希望第二个div必须class="actions"放在第一个之上并左对齐。

到目前为止，我已经尝试做类似下面的事情，但它不起作用。我缺少的东西：

@media only screen and (max-width: 960px) {
  .col-xs-12 {
    display: flex;
    flex-direction: column-reverse;
  }
}

一些技巧？谢谢

标签： htmlcss

解决方案

假设您使用的是 Bootstrap 4：

Bootstrap 是为移动优先而构建的，因此最简单的解决方案是从.sm视图中按顺序排列代码，这将是div您想要的第一个作为整个.row.

这是 Bootstrap 4 中的部分内容：https ://getbootstrap.com/docs/4.4/layout/grid/#order-classes

您必须添加.order-lg-2到div您想首先在屏幕sm上显示的内容md（请记住，首先是移动设备）。您还可以使用 Bootstrap 类之类的东西.justify-content-[sm, md, lg]-[start, center, between, end, around]来设置它的位置。您可能还必须添加.d-flex到第二个div（这就是我在项目中的全部工作方式）。

这是我使用的有效示例（这些部分是并排的lg+，因此您的列大小可能需要调整）：

    <div class="container">
      <div class="row">
        <div class="col-xl-4 col-lg-4 col-md-12 col-sm-12 order-lg-2 justify-content-center justify-content-sm-start"> <!-- shows first on sm/md, 2nd on lg -->
           <!-- your code -->
        </div>
        <div class="col-xl-8 col-lg-8 col-md-12 col-sm-12 order-lg-1 justify-content-center justify-content-md-start"> <!-- shows 2nd on sm/md, 1st on lg -->
          <!-- more code -->
        </div>
      </div>
    </div>

这是我设置的一个快速 CodePen，向您展示它是如何工作的： Codepen

推荐阅读