css arrange two elements one after another-CodePudding

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
        }
      }
    }
  }
}

CodePudding user response：

Adding display:block on a will do what you want, like so (I am using css so that it works here):

@media screen and (max-width: 580px) {
  a {
    display: block;
  }
}

<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>