What CSS & HTML do I need to switch a table from 4 cols of data in 1 row to 2 cols in 2 rows at 550px screen width w/o duplicate content?

Question

Using CSS and HTML I would like to achieve this effect without duplicate content? 1. Screen width greater than 550px: 2. Screen width less than 550px: Here's a link to the sample page which uses the code which I pasted in next section: http://www.omniturn.com/bin/RepairParts/rp_sample-code.htm

I'm not well-schooled in CSS, so I investigated various forums and blogs w/o success. I did not investigate Bootstrap. By fooling around I stumbled upon a technique that works, but it requires duplicating the content. I'd like to avoid that requirement. Here's the code I came up with: CSS:

.box1{display: table-cell;  
    border:1px solid black;
    width: 35%;
    padding: .5em;
    margin-bottom: 0px;
    vertical-align:middle;
    text-align: center; 
    }
.box2{display: table-cell;
    border:1px solid black;
    width: 40%;
    padding: .5em;
    margin-bottom: 0px;
    vertical-align:middle;
    text-align: center;
    }
.box3{display: table-cell;
    border:1px solid black;
    width: 15%;
    padding: .5em;
    vertical-align:middle;
    text-align: center; 
    }
.box4{display: table-cell;
    border:1px solid black;
    width: 10%;
    padding: .5em;
    vertical-align:middle;
    text-align: center;
    }
.box3a{display: table-cell;
    border:1px solid black;
    width: 15%;
    padding: .5em;`your text`
    vertical-align:middle;
    text-align: center;
    line-height: .5;    
    }
.box4a{display: table-cell;
    border:1px solid black;
    width: 10%;
    padding: .5em;
    vertical-align:middle;
    text-align: center; 
    line-height: .5;        
    }
.row-big{display: table-row; width: 900px;}
.row-small{display: none;font-size: .8em;}

@media only screen and (max-width: 550px) {
h1{font-size: .8em;}
.box1{width: 45%;}
.box2{width: 45%;}
.box3{width: 45%;border-bottom: 3px solid black;}
.box4{width: 45%;border-bottom: 3px solid black;}
.box3a{width: 45%;border-bottom: 3px solid black;}
.box4a{width: 45%;border-bottom: 3px solid black;}
.row-big{display: none;}
.row-small{display: table-row;}
}
@media only screen and (max-width: 680px) {
    .row-big{font-size: .8em;}
    }

HTML:

<div style="display:table; width:100% ">
<div class="row-big">
<div class="box1">Component</div>  
<div class="box2">Description</div>
<div class="box3">Part Number</div>
<div class="box4">Price</div>
</div>
<div class="row-small">
<div class="box1">Component</div>  
<div class="box2">Description</div>
</div>
<div class="row-small">
<div class="box3">Part Number</div>
<div class="box4">Price</div>
</div>

<div class="row-big">
<div class="box1"><img src="some.jpg" alt="Image of Palm Box" title=""></div>  
<div class="box2">Palm Box (Operators Station)</div>
<div class="box3">998-00-000 </div>
<div class="box4">$395 </div>
</div>
<div class="row-small">
<div class="box1"><img src="some.jpg" alt="Image of Palm Box" title=""></div>  
<div class="box2">Palm Box (Operators Station)</div>
</div>
<div class="row-small">
<div class="box3">998-00-000</div>
<div class="box4">$395 </div>
</div>
<div class="row-big">
<div class="box1"><img src="some.jpg" alt="Image of Palm Box Collet Close Assy" title=""></div>  
<div class="box2">Palm Box Collet Close Assy</div>
<div class="box3">998-12-101 </div>
<div class="box4">$35 </div>
</div>
<div class="row-small">
<div class="box1"><img src="some.jpg" alt="Image of Palm Box Collet Close Assy" title=""></div>  
<div class="box2">Palm Box Collet Close Assy</div>
</div>
<div class="row-small">
<div class="box3">998-12-101</div>
<div class="box4">$35 </div>
</div>
</div>

Thank you in advance for any help!