[HTML][CSS] Responsywność Opcje

[deli55]

Witam,
mam tabelkę z 5 kolumnami, każda kolumna to ikonka numer i tekst obok siebie, chciałbym aby się to dobrze wyświetlało także na smartfonach, jeżeli wejdę na stronę z telefonu, to po prostu pokazują się 2 tabelki zamiast 5, chciałbym żeby było to responsywne na telefonie i jedna tabelka na jeden wiersz. Poniżej kod CSS. Jest to bardzo proste zadanie ale ja jeszcze nie do końca ogarniam CSS żeby do tego dojść.

[HTML] pobierz, plaintext 
body {
  font-family: Arial;
  padding: 10px;
  background-color: #f5f5f5;
  color: #808080;
  	text-align: center;	
}
 
/*-=-=-=-=-=-=-=-=-=-=-=- */
/* Column Grids */
/*-=-=-=-=-=-=-=-=-=-=-=- */
 
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
	position: relative;
	display:inline;
	display: inline-block;
	float: left;
	margin-right: 2%;
	margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Column Grids End */
 
.wrapper { width: 980px; margin: 1px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal;  margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #b5b3b4; }
[HTML] pobierz, plaintext 

Czy naprawdę nikt nie jest w stanie mi pomóc:(?

Ten post edytował deli55 3.12.2017, 23:08:39