Bootstrap stacking horizontal elements when resizing-CodePudding

I am a bootstrap newbie. I need to have two elements in a div stack vertically on smaller screens. I want the "add project" to stack under the "Active Projects" text on smaller screens.

I am guessing I could accomplish this with columns but I remember seeing this done another way in the past. Is there a better way to accomplish this.

The html:

{% block content %}
  <div >
   <div >
     <div >
       <a  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 >
       <div >
        <div >
          <div >
            <div ><a href="{% url 'project_detail' post.pk %}">{{ post.title }}</a></div>
            <div >{{ 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 %}

The relevant CSS:

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

}

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

CodePudding user response：

You can use flex-box to achieve this. Kindly try this code

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

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