调整大小时引导堆叠水平元素

Question

我是一个引导新手。我需要在较小的屏幕上垂直放置 div 堆栈中的两个元素。我希望“添加项目”堆叠在较小屏幕上的“活动项目”文本下。

我猜我可以通过列来实现这一点，但我记得过去曾以另一种方式做到这一点。有没有更好的方法来实现这一点。

html:

{% block content %}
  <div class="section-container container">
   <div class="general-section-header">
     <div class="header-add-new">
       <a class="btn btn-success" href="{% url 'add_project' %}" role="button">Add Project</a>
     </div>
     <h1>Active Projects</h1> 
  </div>
  
   {% for post in object_list %}
    {% if post.status == "active" %}
     <div class ="projects-entry">
      <div class="col-sm-8">
       <div class="row-sm-6">
        <div class="card mb-2">
          <div class="card-body">
            <div class="card-title"><a href="{% url 'project_detail' post.pk %}">{{ post.title }}</a></div>
            <div class="card-text">{{ post.description | safe | truncatewords:"20"|linebreaks }}
            <a href="{% url 'project_detail' post.pk %}">read more</a></div>
         </div>
       </div>
      </div>
      </div>
     </div>
     {% endif %}
   {% endfor %}

  </div>
  {% endblock content %}

相关的 CSS：

.general-section-header {
    text-align: center;
    padding-bottom: 1.5rem;

}

.header-add-new {
    position: absolute;
    left: 9rem;
}

Answer 1

您可以使用flex-box 来实现此目的。请尝试此代码

@media (max-width: 768px){
    .general-section-header {
        display: flex;
        flex-direction: column;
    }

    .header-add-new {
        order: 1;
        position: unset;
        left: unset;
    }
}