Trying to shift rows down a container when using #media - html

Question

is there a way using css to shift rows down the container when using #media originally two columns per row (3 rows total),need 1 column only when resized to multiple widths ex: 980, 760px, etc. (making 5 lines or rows). Thanks for any help
<div class="container">
<div id="portfolio" class="col-sm-6">
<div class="row">
<h1>Portfolio</h1>
</div>
<br />
<div class="realign">
<div class="row">
<div class="col-sm-6">
<div id="gym"><span class="text">Gym</span></div>
</div>
<div class="col-sm-6">
<div id="hiking"><span class="text">Hiking</span></div>
</div>
<div class="row">
<div class="col-sm-6">
<div id="overwatch"><span class="text">Overwatch</span></div>
</div>
<div class="col-sm-6">
<div id="running"><span class="text">Running</span></div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div id="programming"><span class="text">Programming</span></div>
</div>
</div>
</div>
</div>
</div>
/* Portfolio Only*/
#gym {
background-image: url("images/gym.jpg");
height: 150px;
width: 150px;
}
#hiking {
background-image: url("images/hiking.jpg");
height: 150px;
width: 150px;
margin-bottom: 15px;
margin-left: 15px;
}
#overwatch {
background-image: url("images/overwatch.jpg");
height: 150px;
width: 150px;
margin-left: 15px;
margin-bottom: 15px;
}
#running {
background-image: url("images/running.jpg");
height: 150px;
width: 150px;
padding: 0;
margin-left: 15px;
}
#programming {
background-image: url("images/programming.jpg");
height: 150px;
width: 150px;
margin-left: 15px;
}
#portfolio {
background-color: #ffffff;
padding: 20px;
}
.text {
background-color: #4aaaa5;
color: #ffffff;
width: 150px;
position: absolute;
text-align: center;
top: 120px;
font-family: 'Georgia', Times, "Times New Roman", serif;
}
/* #Media Settings */
#media screen and (max-width: 980px) {
body { width: 100%; }
.linebreak {margin-top: 300px;}
#bio img {margin-left: 50px;}
.realign {
}
/* check if its working */
.footnote {width: 50%;}

Answer 1

You already have classes with names such as col-sm-6, so I'm assuming you're using Bootstrap. That will handle most responsiveness automatically for you, by simply using col-sm (small screens), col-md (medium size screens), and col-lg (large screens). Simply make each row have column widths that add up to 12.
In your case, it sounds like you want to give everything that currently has <div class="col-sm-6"> a class that instead is:
<div class="col-sm-12 col-md-6">
That will result in two columns per row on laptops and desktops, with one column per row on mobile devices.
However, assuming you want to override BootStrap classes (or use your own class with the same name), here's an alternative solution.
First, set a default width of 50% for the class, and apply a float, so that two columns will be next to each other:
.col-sm-6 {
width: 50%;
float: left;
}
Then make said columns occupy 100% of the width at certain screen widths:
#media screen and (max-width: 980px) {
.col-sm-6 {
width: 100%;
}
}
Hope this helps!