html - Bootstrap 列的排序问题

Question

我正在学习网络开发，我正在尝试为 freeCodeCamp 作业构建一个致敬页面。你可以在这里看到我的完整页面:https://codepen.io/Art365/pen/ZKxPQj理想情况下，我希望第二行发生的事情是这样的:

当视口(viewport)很大时，图像在左边，文字在右边。 当视口(viewport)较小时，图像在底部，文本在顶部。

这是相关的代码片段:

<div class="row">

  <div class="col-lg-6 col-lg-push-6">
    <div class="text-content">
      <p>text content</p>
    </div>
  </div>

  <div class="col-lg-6 col-lg-pull-6">
    <img id="pic2" src="http://www.thefamouspeople.com/profiles/images/karl-landsteiner-3.jpg" alt="Landsteiner" />
  </div>

</div>

我意识到以前在这里问过非常相似的问题，我已经尝试了几种利用左拉和右拉的建议解决方案，例如:https://stackoverflow.com/a/20171474/7143798但是，就我而言，除非我将其放在 html 中，否则我似乎无法获得左侧的图像(大 View )。但是如果我把它放在 html 的前面，它会在小 View 中显示在顶部。

Answer 1

由于 CodePen 使用 Bootstrap 4.0.0，您需要使用 .push-lg-6 和 .pull-lg-6。 Bootstrap 3 使用 .col-*-push-* 类。