Bootstrap 4移动端列布局调整：编辑链接右对齐需求

当然可以实现！Bootstrap 4的响应式网格系统和内置工具类正好能帮你搞定这个需求，不用额外写自定义CSS就能达到目标效果。

先看看调整思路：我们要利用Bootstrap的响应式列类，让移动端下时间和Edit链接处于同一行（分别左右对齐），评论内容单独占一行；桌面端则保持原有的三列布局不变。

下面是修改后的完整代码：

<ol class="log">
  <li class="row">
    <!-- 时间列：桌面端占1列，移动端占6列 -->
    <p class="col-md-1 col-6 time mb-0"> 17:45 </p>
    <!-- 评论内容：桌面端占10列，移动端占满整行 -->
    <div class="col-md-10 col-12"> Here’s a comment </div>
    <!-- 编辑列：桌面端占1列，移动端占6列并右对齐 -->
    <p class="col-md-1 col-6 menu-column text-right mb-0">
      <a href="#">Edit</a>
    </p>
  </li>
  <!-- 更多列表项... -->
</ol>

关键改动说明： #

• 给时间列添加了col-6，移动端下占一半宽度，保持默认左对齐；
• 给编辑列添加了col-6 text-right，移动端下占另一半宽度，同时用text-right实现右对齐；
• 评论列添加了col-12，移动端下自动占满整行，和时间、编辑行分开；
• 额外加了mb-0类去掉时间和编辑段落的底部外边距，让第一行的元素更紧凑，避免不必要的间距。

这样调整后，桌面端会完全保留你原来的三列布局，移动端则自动变成两行：第一行左侧是时间，右侧是Edit链接，第二行是评论内容，完美符合你的需求！

内容的提问来源于stack exchange，提问作者Mitkins