Bootstrap4：如何在移动视图中将项目 C 推到底部答案

【问题标题】：Bootstrap4: How do i push the Item C to the bottom in mobile viewBootstrap4：如何在移动视图中将项目 C 推到底部
【发布时间】：2019-07-26 11:07:30
【问题描述】：

我正在使用 Angular 5 和引导程序。

现在我可以通过在desktop 和mobile 视图中隐藏和显示C 来分别完成两个UI，但我确实想确保我的代码易于维护。

我该如何继续，以便C 在移动视图中被推到底部？

桌面视图：

移动端视图：

【问题讨论】：

能否添加描述结构的外部 HTML 模型的示例代码？

标签： css angular user-interface bootstrap-4

【解决方案1】：

这在正常情况下不会发生，您必须重复“C”列的内容，因为它必须为 Bootstrap 网格做一些不正常的事情；对于移动视图，我们隐藏了之前的“C”，我将其命名为“C(a)”，并仅在移动视图中显示“C(b)”；

div {
  border: 1px double red
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">

    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
      <h3>Column A</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
    </div>

    <div class="col-lg-6 col-md-6 col-sm-6 col-6">
      <div class="row">
        <div class="col-12">
          <h3>Column B</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
        <div class="d-none d-sm-block">
          <h3>Column C(a)</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>

    <div class="col-12 d-block d-sm-none">
      <div class="row">
        <div class="col-12">
          <h3>Column C(b)</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
          <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
        </div>
      </div>
    </div>

  </div>
</div>

【讨论】：

您好，谢谢。我也有这个作为我的解决方案，但我尽量不走这条路，因为将来很难进行维护。