Другой порядок столбцов / столбец с правым выравниванием для небольшого мобильного устройства?

Question

У меня есть следующий HTML:

<ol class="log">
  <li class="row">
    <p class="col-1 time">
      17:45
    </p>
    <div class="col-md-10">
      Here’s a comment
    </div>
    <p class="col-1 menu-column">
      <a href="#">Edit</a>
    </p>
  </li>

  ...

</ol>

Вот как выглядит макет для рабочего стола:

ИВот то, что макет выглядит для небольшого мобильного устройства:

То, что я хотел бы сделать, это правильно оправдать ссылку для редактирования по отношению квремя для мобильного устройства - так, чтобы оно занимало всего 2 строки (но сохраняйте первоначальный макет для более крупных устройств).Есть ли способ сделать это с помощью CSS в Bootstrap 4?

Answer 1

Используйте order-* классов, чтобы изменить порядок столбцов.

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css" rel="stylesheet" />
<ol class="log">
  <li class="row">
    <p class="col order-0 col-md-1 time">
      17:45
    </p>
    <div class="col-12 order-2 order-md-1 col-md-10">
      Here’s a comment
    </div>
    <p class="col order-md-2 col-md-1 menu-column text-right text-md-center">
      <a href="#">Edit</a>
    </p>
  </li>
</ol>

Answer 2

Это из-за

<div class="col-md-10">

Изменится на полную ширину, когда ширина дисплея 992px. Так что сделайте его <div class="col-xs-10"> или <div class="col-10">, чтобы он автоматически настраивался на все ширины дисплея