css layouts mobile version

I'm developing a web site, and have problem with layouts. On desktop version it looks exactly how I want it, but on mobile version it is just a mess. Hope that you can help me with it and thank you in advance.

css

.testa {
  height: 40%;
  width: 100%;
  background-color: white;
  margin: 0px;
  position: relative;
}

.testb {
  height: 40%;
  width: 25%;
  background-color: white;
  position: relative;
}

.testc {
  margin-left: 25%;
  height: 40%;
  width: 25%;
  background-color: white;
  position: relative;
  top: -130px;
}

.testd {
  margin-left: 50%;
  height: 40%;
  width: 25%;
  background-color: white;
  position: relative;
  top: -260px;
}

.teste {
  margin-left: 75%;
  height: 40%;
  width: 25%;
  background-color: white;
  position: relative;
  top: -390px;
}

html

<div class="testa">
  <div class=" testb">
    <img src="images/icons/browser.png" width="40px" height="40px" align="left";>
    <h2 class="about">test</h2>
    <p class="abouta">testtesttesttesttest</p>
  </div>
  <div class=" testc">
    <img src="images/icons/smartphone.png" width="40px" height="40px" align="left";>
    <h2 class="about">test</h2>
    <p class="abouta"> testtesttesttesttesttesttesttesttesttest</p>
  </div>
  <div class="testd">
    <img src="images/icons/monitoring.png" width="40px" height="40px" align="left";>
    <h2 class="about">testtesttesttest</h2>
    <p class="abouta">testtesttesttesttesttesttesttesttesttest</p>
  </div>
  <div class="teste">
    <img src="images/icons/rocket.png" width="40px" height="40px" align="left";>
    <h2 class="about"testtesttesttesttest</h2>
    <p class="aboutb">testtesttesttesttesttesttesttesttesttesttesttesttesttest</p>
  </div>
</div>