Is this a viable way to create a responsive CSS "Table"? Are there any pitfalls?

Is this a viable way to create a responsive CSS "Table"? Are there any
pitfalls?

I'm creating forms that I previously had in formal <table> structure, but
want to switch to <div>. I am wondering whether or not the following would
be viable for a responsive structure (i.e., is this "best" practice). I am
also wondering if there are any pitfalls to using this structure.
HTML:
<div class="tableRow">
<div class="columnOne"> content </div>
<div class="columnTwo"> content </div>
<div class="columnThree"> content </div>
<div class="columnFour"> content </div>
</div>
CSS:
.tableRow {width: 100%}
.columnOne {width: 10%; float: left;}
.columnTwo {width: 15%; float: left;}
.columnThree {width: 30%; float: left;}
.columnFour {width: 45%; float: left;}
For responsive, I would do something like this in a @media query (e.g.,
for mobile):
.columnOne, .columnTwo, .columnThree, .columnFour {width: 100%}
which would get the "columns" to effectively become rows at 100%.
This seems to work, but a) is it the best approach; and b) are there any
pitfalls?
Thanks.