小屏幕的重新定位行

Question

我正在使用引导程序将标头元素分布在两列中。

因此，存在row ，其中2 col-md-6分开了元素。 还行吧。

但是，当调整智能手机的大小时，我想按此顺序显示项目（从上到下）：

1）文字（我想在上方显示，但要减小字体大小）
2）按钮（另一个上方的1）
3）图片（较小的图片无关紧要）。

如何使用Bootstrap做到这一点？

CodePen：

https://codepen.io/ogonzales/pen/ebKNoK

HTML

<header class="header" id="header1">

    <div class="row">


        <div class="col-md-6">
            <div class="circle">
                <br>

                <div class="caption">
                    <h2 class="title display-3">Stickers <strong>Personalizados</strong></h2>
                    <p>Lorem m nisi! Eum vitae ipsam veniam, ullam explicabo quaerat asperiores veritatis nam
                        reprehenderit necessitatibus sequi.</p>
                </div>
                <div class="row">
                    <div class="col-md-5">

                        <a href="stickers" class="btn btn-azul text-white btn-block">Comprar</a>

                    </div>

                    <div class="col-md-5 my-home-banner-image">

                        <a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras
                        </a>

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <br>
            <img class="" src="https://www.austinhomebrew.com/assets/images/sticke-alt-8989.png" width="440px" height="300px">
        </div>

    </div>

</header>

参考：

更新1：

我从AnnieP的答案中得到此结果。 但：

如何给部分之间，尤其是按钮之间留出间隔？

Answer 1

就Bootstrap而言，您所拥有的应该可以工作。 col-md-6 表示 “我希望此列在大于767像素的屏幕上为6宽”，因为您没有为col-xs和col-sm指定任何内容，默认情况下，每个div都带有.col-在屏幕767和更小的屏幕上将为col-12或全角。 看来您没有将Bootstrap连接到Codepen，所以它在那里不会做出响应，但是应该在Bootstrap运行时使用。 看来您那里有很多CSS，它们正在尝试处理Bootstrap的列为您提供的服务。 例如，您拥有的以下CSS应该全部用<div class="col-md-6"> ：

/*=== Large devices (desktops, 992px and up) ===*/
@media (min-width: 992px) {
.header .center {
  width: 50%;
}

您需要做的是使用媒体查询来更改CSS，以更改文字大小和图像尺寸/位置。 您的图像设置有绝对的位置，这就是为什么当它响应地调整为较小的屏幕时，它位于按钮的顶部。 而是利用Bootstrap的网格系统，并为其指定col-md-6 。 以下是您所需的全部概述：

<div class="container">
  <div class="row">
    <div class="col-md-6">
      <h2>Stickers Personalizados</h2>
      <p>Lorum impsum</p>
      <div class="row">
        <div class="col-md-6">
          <a href="stickers" class="btn btn-azul text-white btn-block">Comprar</a>
        </div>
        <div class="col-md-6">
          <a href="{% url 'shop:SamplePackPage' %}" class="btn btn-naranja text-white btn-block">Muestras</a>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <img class="" src="https://raw.githubusercontent.com/alphadsy/alpha-ui/master/images/man.png" width="440px" height="300px">
    </div>
  </div>
</div>

如果需要帮助进行设置，请重新访问Bootstrap 入门文档 ，并且您可能不需要Codepen中的大多数CSS。

更新：

要在各节之间实现间距，您可以添加带有class="row"的wrapper div ，但这不适用于按钮，因为它们从同一行开始。 在这种情况下，您需要在CSS中添加margin-bottom 。 例如：

.btn {
  margin-bottom: 10px;
}