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:

<metaname="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;
  }
}

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

CodePen

Solution 2:

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

    .TableOfReasonstabletd{
        display:block;
        width:100%;
        padding:0px;
        margin:0px;
        clear:block;
    }
}

try this