Bootstrap - 移动下一个<div>在以前的中小型设备之上</div><div id="text_translate"><p>我在Bootstrap中有以下div ：</p><pre> &lt;div class="card-header py-md-0 py-lg-0 py-xl-0 pl-0 pr-0"&gt; &lt;div class="d-flex justify-content-between align-items-center"&gt; &lt;div class="h5 mb-0"&gt;Text text&lt;/div&gt; &lt;div class="text-right"&gt; &lt;div class="actions"&gt; &lt;a href="#" class="action-item"&gt;&lt;i class="far fa-heart mr-1"&gt;&lt;/i&gt; 50&lt;/a&gt; &lt;a href="#" class="action-item"&gt;&lt;i class="far fa-eye mr-1"&gt;&lt;/i&gt; 250&lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;p class="font-size-1"&gt;Text text text text text &lt;/p&gt; &lt;/div&gt;</pre><p> 在中小型设备上，我希望第二个div具有class="actions"到 go 在第一个顶部并左对齐。</p><p> 到目前为止，我已经尝试做类似下面的事情，但它不起作用。 我缺少的东西：</p><pre> @media only screen and (max-width: 960px) {.col-xs-12 { display: flex; flex-direction: column-reverse; } }</pre><p> 一些技巧？ 谢谢</p></div>

Question

我在Bootstrap中有以下div ：

<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"到 go 在第一个顶部并左对齐。

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

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

一些技巧？ 谢谢

Answer 1

假设您使用的是 Bootstrap 4：

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

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

您必须将.order-lg-2添加到要在sm和md屏幕上首先显示的div中（请记住，首先是移动设备）。 您还可以使用诸如.justify-content-[sm, md, lg]-[start, center, between, end, around]类的 Bootstrap 类来设置其 position。 您可能还必须将.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