Line break <tr> contents in CSS - html

Question

The table looks good on the desktop, but the #media screen of 480x800 makes it go offscreen. Is there a way to line break the contents of table rows in CSS, such that the contents appear on each line instead?
This is how it looks like as of now, i wanted the old man image to proceed to the next line, rather than going offscreen.
This is the html
<div class="sub" id = "history">
<h1>SCIS Roots</h1>
<table class = "table">
<tr>
<td>
<div class = "wrapper">
<img class = "tableImage" src = "../images/bless.jpg" alt = "historyImage1">
<div class = "description">
<p class = "description_content">
The youngest School in Saint Louis University started with the
vision of the then Vice-President for Finance and later University
President, Rev. Fr. Ghisleen de Vos(1976-1983).
</p>
</div>
</div>
</td>
<td>
<div class = "wrapper">
<img class = "tableImage" src = "../images/hist2.png" alt = "historyImage2">
<div class = "description">
<p class = "description_content"> Fr. de Vos saw the
possibility of automating accounting and enrolment systems during
a period where computerization was not yet widely practiced.
</p>
</div>
</div>
</td>
</tr>
</table>
<h3>SCIS- LEVEL UP!</h3>
<table class = "table">
<tr>
<td>
<div class = "wrapper">
<img class = "tableImage" src = "../images/hist7.png" alt = "historyImage3">
<div class = "description">
<p class = "description_content">
SLU catered to the computing needs of other institutions in nearby
regions when it was acquitted by IBM Systems in 1969 and 1980 until
1990.
</p>
</div>
</div>
</td>
<td>
<div class = "wrapper">
<img class = "tableImage" src = "../images/scis.jpg" alt ="historyImage4">
<div class ="description">
<p class = "description_content">
In 1990 it became the Institute of Information and
Computing Science and offered the Computer Science course. The
institute became a college in 1994.
</p>
</div>
</div>
</td>
<td>
<div class = "wrapper">
<img class = "tableImage" src = "../images/hist3.png" alt = "historyImage3">
<div class = "description">
<p>
Courses in Information Technology, Mathematics, Information Management, and Library and
Information Science were added over time. By 1995, it was the first
in the region to offer a graduate program in IT.
</p>
</div>
</div>
</td>
</tr>
</table>
<h3>SCIS REACHES OUT!</h3>
<table class = "table">
<tr>
<td>
<div class = "wrapper">
<img class = "tableImage" src = "../images/ict.jpg" alt = "historyImage4">
<div class = "description">
<p>
In 2007, it hosted the first ever Northern Luzon International IT
conference. This was attended by people from all over the globe and
became an annual event.
</p>
</div>
</div>
</td>
<td>
<div class = "wrapper">
<img class = "tableImage" src = "../images/hist4.jpg" alt = "historyImage4">
<div class = "description">
<p class = "description_content">
To keep up with the trend of Digital Arts technology, the School
has since added short diploma courses in digital animation,
multimedia systems, digital design, editing and publishing, and
the like. The School is also the first in the country to offer the
trending academic initiative - Masters of Science in Service
Management Engineering(MSSME).
</p>
</div>
</div>
</td>
<td>
<div class = "wrapper">
<img class = "tableImage" src = "../images/hist5.png" alt = "historyImage6">
<div class = "description">
<p class = "description_content">
The School is also socially relevant when it comes
to sharing its expertise and resources. In 2007, it donated
multiple computers to the Baguio City National High School(BCNHS)
as part of a collaborative project with the Close the Gap(CTG)
alliance program of Belgium. Along with this, the School designed
and conducted a series of training programs for the teachers of
the BCNHS on several computer and web-based applications.
</p>
</div>
</div>
</td>
</tr>
</table>
<h3>THE FUTURE OF SCIS!</h3>
<p id = "future">
The School's future looks bright as it continues to soar with the
speed of rapid modernization. The School of Computing and
Information and Sciences recognizes though that the power to
create, command, and control information technology comes with
great responsibility. The School therefore primes itself not
only on setting new academic directions towards the advancement
of IT and Computing education and research, but also on
advocating the ethical use of information and computing
technology.
</p>
</div>
This is the css that relates to the table
.wrapper{
float:left;
position:relative;
margin; 0 auto;
}
.description{
position:absolute;
bottom:0px;
left:0px;
width:100%;
background-color:black;
font-family: 'tahoma';
font-size:15px;
color:white;
display:none;
border-radius:3em;
}
a:hover+div{
display: block;
opacity:0.6;
}
.description_content{
padding:10px;
margin:0px;
display:block;
}
.table{
margin-left:auto;
margin-right:auto;
padding: 2px;
}
.tableImage{
width : 304px;
height: 228px;
display: inline;
border:2px solid;
border-radius:2em;
margin:5px;
}
.tableImage:hover{
width : 350px;
height: 300px;
box-shadow:10px 10px 5px #888888;
}

Answer 1

If you want your page to be responsive, I'd move away from placing content in a table. With regards to the images on your page, I'd place each one in a div. The divs would be placed side-by-side by default, with a media query placing them one of top of another for narrow displays.
HTML
<div class="parent">
<div class="img-container">
<img src="..."></img>
</div>
<div class="img-container">
<img src="..."></img>
</div>
</div>
CSS
.img-container {
display: inline-block;
}
#media all and (max-width: 480px) {
.img-container {
display: block;
}
}