Relocate Second Column Of Table Below First For Mobile Version

I am trying to relocate second column of table right below first column. I am using html table. Now it [looks like that]: Screenshot or live site. But on mobile version it still k

Solution 1:

You can put the data in two different tables (one for the data on the left and one for the data on the right, otherwise exactly the same) and change the css for .TableOfReasons to this:

.TableOfReasons {
  position: relative;
  left: 0%;
  display: inline-block;
}

then you need to add the html <meta> tag in the head:

  <meta name="viewport" content="width=device-width, initial-scale=1">

and then use this css to change them both to display: block; when the screen changes width;

@media screen and(max-width: 600px) {
  .TableOfReasons {
    display: block;
  }
}

DEMO:

.TableOfReasons {
  position: relative;
  left: 0%;
  display: inline-block;
}
table {
  background-color: transparent;
}
table {
  border-spacing: 0;
  border-collapse: collapse;
}
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
@media screen and(max-width: 600px) {
  .TableOfReasons {
    display: block;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1">
<table class="TableOfReasons">
  <!--One block-->
  <tr><td class="feature-title"><h4>Odours elimination</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=removing-smell&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Stimulation of avian growth <br> and prevention of infectious diseases</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=birds&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Greenhouses</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=plants&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="feature-title"><h4>Beekeeping</h4></td></tr>
  <tr><td class="feature-img"></td></tr>
  <tr><td class="feature-button"><a href="/more-page.php?language=en&name=bees&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
</table>
<table class="TableOfReasons">
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Communal service</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=communal-service&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Stimulation of animal<br>growth and prevention of infectious diseases</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=animals&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>Smell at a bar, restaurant, hotel etc.</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=smell-in-public-place&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
  <!--One block-->
  <tr><td class="right-clmn feature-title"><h4>A the gym</h4></td></tr>
  <tr><td class="right-clmn feature-img"></td></tr>
  <tr><td class="right-clmn feature-button"><a href="/more-page.php?language=en&name=at-gym&link_back=/eng.html&block=bussines"><button class="more_btn">More</button></a></td></tr>
  <!--End of one block-->
</table>

CodePen

Solution 2:

@media (max-width: 600px) {
    .TableOfReasons table tr{
        display:block;
        width:100%;
        padding:0px;
        margin:0px;
    }

    .TableOfReasons table td{
        display:block;
        width:100%;
        padding:0px;
        margin:0px;
        clear:block;
    }
}

try this