Bootstrap - переместить следующую <div>поверх предыдущей на средних и маленьких устройствах

Question

У меня есть следующее 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" до go поверх первый и выровненный влево.

Я до сих пор пытался сделать что-то вроде ниже, но это не работает. Что-то мне не хватает:

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

Несколько советов? Спасибо

Answer 1

Предполагается, что вы используете Bootstrap 4:

Bootstrap построено для mobile-first, поэтому самое простое решение - расположить код по порядку из представления .sm, что будет div, который вы хотите первым как первый во всем этом .row.

Вот раздел в Bootstrap 4, охватывающий это: https://getbootstrap.com/docs/4.4/layout/grid/#order -классы

Вам нужно будет добавить .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