Responsive tables and accessibility

There are many different methods of making tables responsive.  One technique is to turn each row into a grouped column of data by keeping the HTML table structure but using display:block so the data becomes stacked.  The column headers are positioned off-screen and the headers for the columns are placed before the data by using CSS pseudo elements.  One example of this technique can be found in a codepen by Steve Faulkner. http://codepen.io/stevef/details/myzLdr  I like Steve's example and this seems to be a popular technique but I have run into people who disagree on the principle that the structure doesn't match the appearance.

Some say that representing a row of data in a column no longer allows the semantic structure to match the visual presentation and thus there is a violation between the presentation and semantics of the structure.  Does presenting tabular data into a single column raise concern over SC 1.3.1?

Jonathan