HTML/CSS: Getting links styled like buttons to stack - html

Question

I'm currently working on a simple project in HTML/CSS (Bootstrap). Very simply, I have the task of styling links to look like buttons, and getting them to stack in a mobile view.
Requirements: buttons should be side-by-side on regular/desktop view, and should stack on top of each other in iPhone/Android devices.
CodePen: https://codepen.io/anfperez/pen/joqoXG
Here's the code I have so far:
html
<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>
css (Bootstrap can be included)
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}
When I try viewing the code in a mobile view, the red button button ends up overlapping on top of the blue button since they're both links. How can I get the red button to clear the blue button? I can't use Bootstrap's btn-group in this case.

Answer 1

You can use Flexbox inside a media query to stack the elements using flex-direction: column.
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}
#media (max-width: 767px) {
.wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
}
}
<div class="wrapper">
<a class="button-a" href="www.google">Link that looks like button</a>
<a class="button-b" href="www.amazon.com">Another link that looks like a button</a>
</div>

Answer 2

....really? you can making a have behaviour of div, if you want them to stack, just make the button class having inline-block
.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
margin: 20px;
display:inline-block;
}
Edited Codepen
This make the a link has the margin and padding behaviour like div. You just have to setting the width.. So if the media canvas shorter, the link will automatically stacking

Answer 3

.button-a, .button-b {
background-color: blue;
color: white;
text-decoration: none;
padding: 10px;
margin: 20px;
display:block;
}
.button-a {
background-color: blue
}
.button-b {
background-color: red;
}