css arrange two elements one after another

How can i display the two links for small screen one after another. Now the two links are left and right. But i want those link one up and another at bottom.

<div className="homeContent">
                <div className="content">
                    <h1>Text</h1>
                    <div className="pdf">
                        <a href="./media/XX.pdf" download="XX.pdf">XX Download</a>
                        <a href="./media/BB.pdf" download="BB.pdf">BB Download</a>
                    </div>
                </div>
            </div>

@media screen and (max-width:580px){
  .homeContent {
    h1 {
      font-size: 3rem !important;
    }
    .content {
      .pdf {
        a {
          // one after another
        }
      }
    }
  }
}