inside divs move on minimizing width of screen - css

Question

I am having troubles with the css on how to make my content within a div that has a border to stay inside and horizontal. when the columns run out of room with their content the columns and content move down. I want them to stay horizontal and readable still instead of moving down below.
Picture before minimizing screen width:
Picture after minimizing screen width:
As you can see the the content inside doesnt stay put!!
Here is my html and some css:
<div class="container3" style="">
<div class="row">
<div class="col-md-11" style="min-width:760px;">
<div class="panel panel-default" style="">
<div class="panel-heading" >
<div >
<h style="margin-left:40px;">Your Requests </h>
</div>
<div style="float:right;margin-top:-30px;">Total: $<div id="sum" style="float:right;"> </div>
</div>
</div>
<% #revisers.each do |reviser| %>
<% reviser.reservations.where("status = ?", true).each do |reservation| %>
<script>
var total = <%= reviser.reservations.where("status = ?", true).sum(:total) %>;
$('#sum').html(total);
</script>
<div class="panel-body" style="">
<div class="col-md-12" style="border:3px solid black;height:108px;max-height:108px;min-width:703px;overflow:hidden;">
<!-- first column -->
<div class="row" style="">
<div class="col-sm-3 center" style="">
<div style="margin-left:-45px;">
<%= reservation.reviser.essay_type %>
</div>
</div>
<div class="col-sm-2 center" >
<div style=" margin-left:-40px;">
File
</div>
</div>
<div class="col-sm-2 center" >
<div style="margin-left:35px;">
Due
</div>
</div>
<div class="col-sm-2 center" >
<div style="margin-left:70px;">
File
</div>
</div>
<div class="col-sm-2 center" style="">
<div style="margin-left:110px;">
Total
</div>
</div>
</div>
<!-- second column -->
<div class="row" style="">
<div class="col-sm-2" style="">
<div style="margin-left:20px;">
<%= render 'shared/essayicons', reviser: reservation.reviser %>
</div>
</div>
<div class="col-sm-1" >
<li class="thumbnail2" style=""><%= image_tag(reservation.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
</div>
<div class="col-sm-1 center" style="margin-top:10px;">
<div class="row">
<div style="color:green;margin-left:10px;">
sent
</div>
</div>
<div class="row">
--->
</div>
</div>
<div class="col-sm-1">
<li class="thumbnail2"><%= image_tag(reservation.reviser.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
</div>
<div class="col-sm-2 center">
<%= reservation.due_date %>
</div>
<div class="col-sm-1">
<li class="thumbnail2"><%= image_tag(reservation.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
</div>
<div class="col-sm-1 center" style="margin-top:10px;">
<div class="row">
<div style="color:green;margin-left:10px;">
sent
</div>
</div>
<div class="row">
<---
</div>
</div>
<div class="col-sm-1">
<li class="thumbnail2"><%= image_tag(reservation.reviser.user.avatar.url(:thumb), :id => "image-tag", class: "portrait") %></li>
</div>
<div class="col-sm-1 center" style="margin-left:30px;">
<h4>$<%= reservation.total %></h4>
</div>
</div>
<!-- Third Column -->
<div class="row" style="">
<div class="col-sm-2 center">
<div>
<%= time_ago_in_words(reservation.created_at) %> ago
</div>
</div>
<div class="col-sm-2 center" style="">
<div style="margin-left:-45px;">
<%= reservation.user.username %>
</div>
</div>
<div class="col-sm-2 center">
<div style="margin-left:-40px;">
<%= reservation.reviser.user.username %>
</div>
</div>
<div class="col-sm-2 center" >
<div style="margin-left:70px;">
<%= reservation.user.username %>
</div>
</div>
<div class="col-sm-2 center" >
<div style="margin-left:50px;">
<%= reservation.reviser.user.username %>
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
</div>
</div>
SCSS file:
.container3{
margin:auto;
width:80%;
}
.panel {
border-radius: 8px;
}
.panel-default .panel-heading {
color: #565a5c;
background-color: #edefed;
font-size: 18px;
font-weight: 400;
}
.panel-heading{
margin:0 auto;
h1 {
text-align: center;
}
}
.panel-body{
margin-top: 0px;
}
How can i get these divs to stop moving underneath each other? Just keep them put and if someone reduces screen width then they will just not be shown on screen unless the user extends the screen again, just like how the total on the header near Your Requests isn't showing up at a certain point when I minimize screen. Thank you!!^^

Answer 1

Just add .hidden-xs and .hidden-sm to the offending col-md-* divs
http://getbootstrap.com/css/#responsive-utilities