One page site - images overflow on responsive versions - html

Question

I've put together a one page site but am having problems with the top section.
It's fine on a desktop, but on any other device the three main photographs on the section stack, instead of the section expanding to allow this, the images just overflow (or are hidden if using overflow hidden property).
I'm not sure what the issue is that's causing this and would be grateful for your guidance.
Here's the html:
<!-- Jumbotron -->
<section class="jumbotron" id="header">
<div class="container">
<div class="main-photo" id="header-photo">
</div>
<div class="transparent-box" style="padding-top: 3%;">
<img src="images/logo.png" style="width: 100%;"></img>
</div>
<div class="row">
<div class="col-md-10 col-md-offset-1" style="padding-top:5%">
<div class="row">
<div class="col-md-3 col-sm-offset-1">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo1-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo2-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
<div class="col-md-3">
<figure class="round-outline">
<img class="round-photo img-responsive" src="assets/photo3-sm.jpg" alt="">
<div class="round-caption-bg"></div>
</figure>
</div>
</div>
<div class="row">
<a href="#quote-one" style="color: #d5b17c;">
<i class="fa fa-chevron-down fa-2x pulsate-opacity chevron"></i>
</a>
</div>
</div>
</div>
</div>
</section>
<!-- End of Jumbotron -->
and the css:
/* ==========================================================================
Jumbotron Section
========================================================================== */
.jumbotron {
padding: 100px 0 60px;
margin-top: 0;
margin-bottom: 0;
background: transparent url('../images/black-red-background.jpg') no-repeat top center;
background-size: auto auto;
background-attachment: fixed;
font-size: 1em;
height: auto;
overflow: hidden;
}
.jumbotron .container {
text-align: center;
}

Answer 1

If I understood correctly then the problem is your col-md classes cause breakpoints at the MD size which is tablets lower.
Change <div class="col-md-3 col-sm-offset-1"> to <div class="col-xs-4">
And the other 2 <div class="col-md-3" also to <div class="col-xs-4">
Is that what you want?