Div col moving under the previous column when minimizing width of browser - css

Question

Hello I want to keep my column in the same place when minimizing the screen width. How can I keep the div from moving to the bottom?? Is there a way to keep it set in that position so that the user has to scroll right or left in order to see the rest when its minimized? For example when you create a question there is a box on the right named "similar questions," when i minimize the width the box stays in the position and becomes hidden until you scroll to the right.
Before
After
Html page
<div class="container3" style="padding-top:50px;" >
<div class="row" style="" >
<div class="col-md-4" style="background-color:#DDDDDD;height:100%;border-radius: 4px;min-width:360px;">
<!-- Make an if statement for online and offline -->
<div class="row center">
<% if #user.online? %>
<div class="btn btn-block" id="available">
Online Now
</div>
<% else %>
<div class="btn btn-block" id="unavailable" style="background-color:#990000;">
Offline
</div>
<% end %>
<div id="contain-pic">
<div class="thumbnail" style="width:300px;height:300px;overflow:hidden;background-color:black;">
<%= image_tag #user.avatar.url(:medium), :id => "image-tag", class: "portrait" %>
</div>
</div>
<div id="average_rating"></div>
<script>
$('#average_rating').raty({
path: '/assets',
readOnly: true,
score: <%= #user.reviews.average(:star) %>
});
</script>
</div>
<div class="row " style="margin-left:20px;">
<div class="row" >
<div class="col-md-3" >
<h2 style="font-size:20px;margin:0 auto;">Country:</h2>
</div>
<% if #user.country != nil %>
<div class="col-md-8" style="margin-left:30px;">
<h><%= #user.country %></h>
</div>
<% else %>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h>N/A</h>
</div>
<% end %>
</div>
<div class="row">
<div class="col-md-3">
<h2 style="font-size:20px;margin:0 auto;">University:</h2>
</div>
<% if #user.school != nil %>
<div class="col-md-8" style="margin-left:30px;">
<h><%= #user.school %></h>
</div>
<% else %>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h>N/A</h>
</div>
<% end %>
</div>
<% if #user.major != nil %>
<div class="row">
<div class="col-md-3">
<h2 style="font-size:20px;margin:0 auto;">Major:</h2>
</div>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h><%= #user.major %></h>
</div>
</div>
<% end %>
<% if #user.occupation != nil %>
<div class="row" >
<div class="col-md-3" >
<h2 style="font-size:20px;margin:0 auto;margin-right:10px;">Occupation:</h2>
</div>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h style=""><%= #user.occupation %></h>
</div>
</div>
<% end %>
<% if #user.company_name != nil %>
<div class="row" >
<div class="col-md-3" >
<h2 style="font-size:20px;margin:0 auto;">Company:</h2>
</div>
<div class="col-md-8" style="margin-left:30px;height:20px;line-height:25px;">
<h><%= #user.company_name %></h>
</div>
</div>
<% end %>
</div>
</div>
<div class="col-md-8">
<div class="row">
<div class="col-md-4">
<h2 style="font-size:40px;"> <%= #user.username %></h2>
</div>
<div class="col-md-4">
<div class="msg-btn">
<%= link_to 'Send message', new_message_path(to: #user.id), class: 'btn btn-primary' %>
</div>
</div>
<div class="row col-md-10" style="height:150px;max-height:300px;margin-left:75px;margin-top:20px;">
<label style="font-weight:bold;font-size:20px;">About Me</label>
<div class="description" style="overflow:auto;height:130px;max-height:130px;">
<% if #user.description != nil %>
<%= #user.description %>
<% else %>
<p> There is no description...... </p>
<% end %>
</div>
</div>
</div>
<div class="row col-md-12" style="height:230px;max-height:270px;margin-top:15px;" id="introduction">
<div class="col-md-6">
<% if #user.school_description != nil %>
<h3> School Experience </h3>
<p><%= #user.school_description %></p>
<% else %>
<% end %>
</div>
<div class="col-md-6">
<% if #user.occupation_details != nil %>
<h3> Job Experience </h3>
<p><%= #user.occupation_details %></p>
<% else %>
<% end %>
</div>
</div>
<div class="col-md-12">
<div class="row center">
<h2 >I am available to revise these types of papers</h2>
</div>
<div class="row" style="margin-top:30px;">
<% #user.revisers.each do |reviser| %>
<%= link_to reviser do %>
<div class="col-sm-6">
<div style="border: 3px solid grey;width:300px;max-width:300px;height:165px;max-height:165px;margin:10px;">
<div>
<div class="row">
<h2 style="color:black;" class="center"><%= reviser.try(:essay_type) %></h2>
</div>
<div class="row">
<div class="col-sm-3">
<%= render 'shared/essayicons', reviser: reviser %>
</div>
<div class="col-sm-3">
</div>
</div>
</div>
</div>
</div>
<% end %>
<% end %>
</div>
</div>
<div class="col-md-12" style="margin-top:20px;margin-bottom:40px;">
<h4>Reviews</h4>
<% #revisers.each do |reviser| %>
<% if !reviser.reviews.blank? %>
<% reviser.reviews.each do |review| %>
<div class="row">
<div class="col-md-2 text-center">
<%= image_tag review.user.avatar.url(:medium), :id => "image-tag", class: "img-circle thumbnail2" %><br>
<%= review.user.username %>
</div>
<div class="col-md-10">
<%= link_to reviser.essay_type, reviser %><br>
<%= review.comment %><br>
<%= review.created_at.strftime("%v") %>
</div>
</div>
<% end %>
<% end %>
<% end %>
</div>
</div>
</div>
</div>

Answer 1

If you set a min-width on a parent element, it will give you the effect you're after. In your case, that would probably be '.container3' or 'body'.
.container3{
min-width: 1440px;
}
or
body{
min-width: 1440px;
}
Note: the value for min-width can be whatever you want.