小型移动设备的不同列顺序/右对齐列？

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行（但保留较大设备的原始布局）。在Bootstrap 4中有没有办法用css做这个？

Answer 1

那是因为

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

当显示宽度为992px时，它将变为全宽 因此，请将其<div class="col-xs-10">或<div class="col-10">设置为自动调整为所有显示宽度

Answer 2

使用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>