css - 为小屏幕重新定位行

Question

我正在使用 bootstrap 将我的标题元素分布在两列中。

所以有一个 row，用 2 个 col-md-6 将元素左右分开。这没关系。

但是当调整到智能手机大小时，我想按此顺序(从上到下)显示元素:

1) 文本(我想将其显示在顶部但减小字体大小)
2) 按钮(一个在另一个上面)
3)图像(较小的图像无关紧要)。

如何使用 Bootstrap 做到这一点？

代码笔:

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 is saying “我希望此列在大于 767 像素的屏幕上为 6 宽”，因为您没有为 col-xs 指定任何内容和 col-sm , 默认情况下每个 div 都有一个 .col-将是 col-12 ，或全 Angular ，在屏幕 767 和更小。看起来你没有将 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 using media queries用于文本大小更改和图像大小/定位。您的图像设置为绝对定位，这就是为什么当它响应地调整到较小的屏幕时它位于按钮顶部的原因。相反，利用 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 getting started docs如果您在设置方面需要帮助，并且您可能不需要 Codepen 中的大部分 CSS。

更新:

要在部分下方实现间距，您可以添加包装器 div与 class="row" ，但这对按钮不起作用，因为它们从同一行开始。在这种情况下，您需要添加 margin-bottom在CSS中。例如:

.btn {
  margin-bottom: 10px;
}