Stack bootstrap buttons properly - html

Question

So I was making my personal website, and decided to add resume view (google drive link) and resume download option. So I added buttons, and attached glyphicons to them, and used some custom css to make them fit with the find easter eggs button.
I coded on my PC and was happy with the results, but I suddenly remembered that phones might not handle it properly and I was right.
^ This is ok
^ This I need to fix but can't understand how.
Code for the header:
<header>
<div class="container">
<div class="intro-text">
<div class="intro-lead-in">Hey There!</div>
<div class="intro-heading">It's Nice To Meet You</div>
<div class="btn-group"></div>
Find easter eggs
<!-- <button type="button" class="btn btn-primary btn-xl"> -->
<button type="button" class="btn btn-lg btn-primary padbtn" id='vr'>
<span class="glyphicon glyphicon-eye-open"></span>
</button>
<!-- ISSUE HERE!! -->
<!-- <i class="fa fa-at fa-stack-1x fa-inverse"></i> -->
<a download="Resume_Ayush_Mandowara.pdf" href="\pdf\RESUME_14_6_17.pdf"><button type="button" class="btn btn-lg btn-primary padbtn" id='dr'>
<span class="glyphicon glyphicon-cloud-download"></span>
</button></a>
</div>
</div>
</header>
CSS applied to download and view buttons:
.padbtn
{
padding: 1.1em;
}
I want to stick the view and download buttons together, and make it look not so horrible, any help is appreciated! Thanks!

Answer 1

Since you're using Bootstrap you could use the column classes but this appears to be more of a one off and the columns might not provide the spacing/layout you're looking for.
I would wrap the two buttons that you want grouped in another element. Then add a media query to switch between inline and block display. Setting the grouping element to display: block; will move it below the Easter Egg button.
Here's a simplified example.
.my-btns {
text-align: center;
}
#media ( min-width: 481px ) {
.my-btn-group {
display: inline-block;
}
}
<div class="my-btns">
<button>Easter Eggs</button>
<div class="my-btn-group">
<button>1</button>
<button>2</button>
</div>
</div>