Question

我正在学习网页开发，我正在尝试为freeCodeCamp分配构建一个致敬页面。您可以在此处查看我的完整页面：https://codepen.io/Art365/pen/ZKxPQj理想情况下，我希望第二行发生的是：

当视口很大时，图像位于左侧，文本位于右侧。当视口较小时，图像位于底部，文本位于顶部。

以下是相关的代码段：

<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中，否则在左边（大视图）中获取图像。但是，如果我把它放在html的第一位，它将以小视图显示在顶部。

Answer 1

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

Answer 2

无需推拉。你可以使用断点来做到这一点。

<div class="row">
     <div class="col-sm-12 col-md-6 col-lg-6"> Your image here </div>

     <div class="col-sm-12 col-md-6 col-lg-6">
     <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
     </p></div>
</div>
<div class="row">
     <div class="col-sm-12 col-md-6 col-lg-6"> Your image here </div>

     <div class="col-sm-12 col-md-6 col-lg-6">
     <p>Donec ullamcorper nulla non metus auctor fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.
     </p></div>
</div>

这将在LG和Medium断点中并排堆叠它们，然后分解为全宽列以强制在小视口上进行顶部/底部布局。您不需要包含XS断点，因为col-xs- *默认为12列。

使用bootstrap列排序问题

2 个答案: