Best way to show tables on mobile and tablet common dimension

Question

I have a visual problem that breaks usability in my opinion.

I'm using Twitter's Bootstrap V.3 and I have a web form.

I must show a table with this information:

City, Address, Latitude, Longitude, TextField, Tels

Tels can be more than a value (my JavaScript manages that) and the TextField commonly has a number of characters that is approximately 85 (can be more, can be less)...

It is visually acceptable to append rows one below another (in desktop view), but on smartphones or tablets is really bad.

What is the best way to achieve this?

Answer 1

See this few examples below. Different approaches to table presentation in mobile context.

1. First on top represents swipeable columns in mobile view.
2. Second screen refers to few-columns-in-one-column approach :)
3. Third one in an example of collapsable / expandable menu which can be helpful in combination with example nr 2.

Inspired by Wikipedia, Atlassian Confluance and others.