[html] tabelki a małe ekrany/planowanie strony

Hej Torgi,

przebudowuję sobie stronę zbudowaną na joomli. Tam, gdzie to możliwe używam oczywiście gotowych modułów albo jakoś z nich korzystam, bo to potem dobrze działa i responsivness na małe ekrany też jest dobrze ogarnięty.

Natomiast niestety w footerze wymyśliłem sobie poziomą tabelkę, która na małym ekranie psuje układ.

Stąd moje pytanie, jak zrobić coś taki układ jak na screenie, tylko bez uzycia tabelki. Czy łatwiej zrobić tak żeby ta tabelka się 'przerzucała w pion' na małych ekranach? Bo reszte css do niej mam ok, w sensie jakiś ładny i pasujący hover effect itd.

Załącznik 357688

Display: inline-block albo
Display: block; float: left albo Flexbox.
Ja bym to zrobił tak:
<ul>
<li>About us</li>
...
</ul>

Dla ul list-style: none; overflow: hidden;
Dla li display: block; float: left; width: calc(100% / 6) - tu możesz podać przybliżoną wartość 16.667%. Potem media-queries i zwiększasz szerokość li im mniejsza szerokość okna.
Jak chcesz coś na dole jeszcze dodać to najpierw dorzuć element z clear: both.

@Decretis ;
dzieki!

i rozumiem ze dla tych bloczków moge tak samo sobie zrobić klasy o określonych stylach w css?

Możesz, jak najbardziej.
Jakbyś miał jakiś problem to zrobiłem na szybko fiddle: https://jsfiddle.net/wq3o2gb3/ przesuwaj to okienko z prawego dolnego rogu żeby zobaczyć jak działają media queries (breakpointy ustawiłem tak żeby dało się to zobaczyć na fiddlu, ale u siebie lepiej zrób standardowe).

dzieki wielkie @Decretis ;

wszystko cacy (troche pozmienialem ten kod fiddlowy ale to było superprzydatne)