Repositioning an image on mobile view

Question

I am trying to place an image when the window size reaches <= 700px.

However I cannot get the image to be centered in the position that I want, it continues to stay in the left.

Here is my code: http://www.bootply.com/7LaUTsPSG4

/* CSS used here will be applied after bootstrap.css */

.noFix {
  background-color: #363535;
  padding: 10px;
  margin-bottom: 10px;
}
.noFixTable {
  margin-left: auto;
  margin-right: auto;
  vertical-align: top;
}
.about {
  vertical-align: top;
}
.noFixTable p {
  color: white;
  height: auto;
  min-height: 200px;
  border: 1px solid white;
  max-width: 400px;
  width: auto;
  text-align: justify;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: -5px;
}
.noFixTable h3,
.noFixTable h4 {
  color: white;
  text-align: left;
  margin-left: 20px;
  font-size: 25px;
}
.noFixTable td {
  text-align: center;
  width: auto;
}
#fixIMG {
  width: 400px;
  height: auto;
}
#repairIMG {
  width: 400px;
  height: auto;
  margin-top: 10px;
}
.noFixTable hr {
  margin-left: 20px;
  margin-right: 20px;
  border: 2px solid white;
  margin-top: -2px;
  width: auto;
}
.noFixTable #hrInner {
  margin-top: -24px;
  max-width: 100px;
  width: auto;
  border-color: #0076ff;
}
.noFixTable h3 {
  color: white;
  background-color: #27A9DF;
  max-width: 250px;
  width: auto;
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 20px;
  text-align: center;
}
.noFixTable h3:hover {
  background-color: #1a9fd6;
  cursor: pointer;
}
.noFixTable a {
  color: white;
  text-decoration: none;
}
@media screen and (max-width: 700px) {
  #repairIMG {
    display: none;
  }
  #fixIMG {
    border: 1px solid blue;
  }
}

<div class="noFix">

  <table class="noFixTable" align="center">

    <tbody>
      <tr>
        <td>
          <img id="fixIMG" src="images/nofix.jpg" alt="No Fix, No Fee Service">
        </td>

        <td class="about" rowspan="2">
          <h4>About Us</h4>
          <hr>
          <hr id="hrInner">
          <p>
            Computer-Repair-Service.co.uk is located in and around London. Our discreet computer and laptop repair service offers the highest quality for all our customers and our goal is to provide the best possible service, fixing any problems in the shortest space
            of time possible. We are always training to perfect our delivery so that we can offer the very best in customer care to all our clients. We guarantee to fix and repair your computers, laptops and electronic gadgets and will satisfy all your
            technological needs. No matter your how big or small the problem is, we guarantee to fix it!
          </p>

          <h3><a href="Services.html">Check our Services Page</a></h3>

        </td>

      </tr>

      <tr>
        <td>
          <img id="repairIMG" alt="Repair" src="images/repair.jpg">
        </td>

      </tr>
    </tbody>
  </table>

</div>

Currently the image is only on the left:

This is what I want:

Answer 1

Please check if this works.

@media (max-width:700px){
   .noFixTable td{
      display: block;
   }
   .noFixTable h3{
      margin: 20px auto 10px;
   }
}