Question

我一直在尝试在移动视图中重新排序我的引导列，但我的代码无效。很可能是因为我做错了。

这是我的标记：

<div class="container">
    <div class="row text-center">
        <div class="col-12">
            <h2 class="mb-lg-4 mb-sm-3">Early Stages</h2>
        </div>
        <div class="col-md-7 col-sm-push-5">
            <p>Also known as &apos;the Poor Fellow-Soldiers of Christ and of the Temple of Solomon&apos;, the Knights Templars were originally founded circa 1120 CE, by Hugues de Payens, as a means to protect Christian pilgrims to the Holy Land. It was originally intended that nine Templars would protect the pilgrims.</p>
        </div>
        <div class="col-md-5 col-sm-push-7">
            Image Here
        </div>
    </div><!--/row-->
</div>

我想要做的就是让“Image Here”部分超越“也称为穷人等”。在移动视图中的部分（col-sm）。我查看了Bootstraps指南，但我认为我对它的理解不正确，有人能告诉我它是如何完成的吗？

提前致谢

Answer 1

试试这个HTML

<div class="container">

  <div class="row text-center">
    <div class="col-12">
      <h2 class="mb-lg-4 mb-sm-3">Early Stages</h2>
    </div>

    <div class="col-md-5 col-sm-push-7">
      Image Here
    </div>
    <div class="col-md-7 col-sm-pull-5">
      <p>Also known as &apos;the Poor Fellow-Soldiers of Christ and of the Temple of Solomon&apos;, the Knights Templars were originally founded circa 1120 CE, by Hugues de Payens, as a means to protect Christian pilgrims to the Holy Land. It was originally
        intended that nine Templars would protect the pilgrims.</p>
    </div>
  </div>
  <!--/row-->

Link for reference

希望这会有所帮助..

如何正确使用bootstrap推拉

1 个答案: