Bootstrap column overlapping text on mobile - html

Question

I am very new to Bootstrap (as in less than a week's experience), and I have run into an annoying little problem. Upon resize, the text inside one of my columns begins to sort of slide under the column below it. I have tried placing the text in it's own container and changing all containers to .container from .container-fluid, but nothing seems to work.
The website can be accessed here and the relevant code snippets are below
.table > tbody > tr > td {
vertical-align: middle;
}
h1 {
font-family: 'Great Vibes', Helvetica, sans-serif;
font-size: 50px;
color: white;
}
.table > tbody > tr:hover {
background-color: #333333;
}
<div class="col-sm-7" style="background-color: #111313; height: 600px; color: white; min-height: 500px; margin-bottom: 20px">
<h1 style="text-align: center;">Sara Manning<br/> Orchestra</h1>
<iframe class="img-responsive center-block" style="height: 60%; width: 75%" src="https://www.youtube.com/embed/rOjHhS5MtvA" frameborder="0" allowfullscreen></iframe>
<hr/>
<p style="word-wrap: break-word; margin-bottom: 40px; width: 75%; margin: auto;"> The Sara Manning Orchestra is a highly trained group of musicians from all over the world. Our orchestra consists of nearly 80 world renowned musicians. Our conductor, Sara Manning, is skilled enough to have conducted The London Symphony Orchestra when their conductor called in sick. Our musicians are really good too. We've got those guys that play those things with the strings, and some girls who play those big metal tubes you blow on.
<br/>
</p>
</div>
<div class="col-sm-5" style="background-color: black; min-height: 600px; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;">
<h2 style="text-align: center">Upcoming Tourdates</h2>
<table class="table">
<thead>
<th>Location</th>
<th>Date</th>
<th>Ticket Info</th>
</thead>
<tbody>
<tr>
<td>
The Kentucky Theatre
<p class="text-muted">Lexington, KY</p>
</td>
<td>Oct. 22</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
The Civic Auditorium
<p class="text-muted">Knoxville, TN</p>
</td>
<td>Oct. 31</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
The Sydney Opera House
<p class="text-muted">Sydney, New South Wales, Australia</p>
</td>
<td>Nov. 30</td>
<td>
<h3 class="text-danger">Sold Out</h3>
</td>
</tr>
<tr>
<td>
Bob's House of Music 'n Stuff
<p class="text-muted">An Undisclosed Basement In Queens, NY</p>
</td>
<td>Dec. 25</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
Batman's Cave
<p class="text-muted">Gotham, USA</p>
</td>
<td>Dec. 31</td>
<td>
<h3 class="text-danger">Sold Out</h3>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Answer 1

Remove the height: 600px; from your col-sm-7. Perhaps you want a min-height? Since you are forcing it to always be 600px high, the div below it will overlap it when the content in the col-sm-7 is more than 600px.
.table > tbody > tr > td {
vertical-align: middle;
}
h1 {
font-family: 'Great Vibes', Helvetica, sans-serif;
font-size: 50px;
color: white;
}
.table > tbody > tr:hover {
background-color: #333333;
}
<!-- remove height: 600px; -->
<div class="col-sm-7" style="background-color: #111313; color: white; min-height: 500px; margin-bottom: 20px">
<h1 style="text-align: center;">Sara Manning<br/> Orchestra</h1>
<iframe class="img-responsive center-block" style="height: 60%; width: 75%" src="https://www.youtube.com/embed/rOjHhS5MtvA" frameborder="0" allowfullscreen></iframe>
<hr/>
<p style="word-wrap: break-word; margin-bottom: 40px; width: 75%; margin: auto;"> The Sara Manning Orchestra is a highly trained group of musicians from all over the world. Our orchestra consists of nearly 80 world renowned musicians. Our conductor, Sara Manning, is skilled enough to have conducted The London Symphony Orchestra when their conductor called in sick. Our musicians are really good too. We've got those guys that play those things with the strings, and some girls who play those big metal tubes you blow on.
<br/>
</p>
</div>
<div class="col-sm-5" style="background-color: black; min-height: 600px; color: white; border-top-left-radius: 20px; border-bottom-left-radius: 20px;">
<h2 style="text-align: center">Upcoming Tourdates</h2>
<table class="table">
<thead>
<th>Location</th>
<th>Date</th>
<th>Ticket Info</th>
</thead>
<tbody>
<tr>
<td>
The Kentucky Theatre
<p class="text-muted">Lexington, KY</p>
</td>
<td>Oct. 22</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
The Civic Auditorium
<p class="text-muted">Knoxville, TN</p>
</td>
<td>Oct. 31</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
The Sydney Opera House
<p class="text-muted">Sydney, New South Wales, Australia</p>
</td>
<td>Nov. 30</td>
<td>
<h3 class="text-danger">Sold Out</h3>
</td>
</tr>
<tr>
<td>
Bob's House of Music 'n Stuff
<p class="text-muted">An Undisclosed Basement In Queens, NY</p>
</td>
<td>Dec. 25</td>
<td><button class="btn btn-primary">Get Tickets</button></td>
</tr>
<tr>
<td>
Batman's Cave
<p class="text-muted">Gotham, USA</p>
</td>
<td>Dec. 31</td>
<td>
<h3 class="text-danger">Sold Out</h3>
</td>
</tr>
</tbody>
</table>
</div>