根据显示宽度更改文本的清晰度

Question

我有彼此相邻的两列（col-md-6），在小显示屏（col-sm-12）上一列一列地显示。

第二列中的文本显示为左对齐。但是我想以小显示器为中心显示文本。

[目前，我找到了使用d-none和d-block类的解决方案。但列中的内容相同，已加载两次。

有更好的解决方案吗？

   <div class="container">
    <div class="row align-items-center">
        <div class="col-sm-12 col-md-6 text-center">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
        <div class="col-md-6 text-left d-none d-md-block">
            <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
        </div>
        <div class="col-12 d-md-none text-center">
            <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
        </div>
    </div>
</div>

Answer 1

是的，可以借助这样的默认引导程序类轻松完成

  <div class="container">
    <div class="row align-items-center">
        <div class="col-sm-12 col-md-6 text-center">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
        </div>
        <div class="col-sm-12 col-md-6 text-center text-md-left">
            <p>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo.</p>
        </div>
    </div>
  </div>