In my code I would want to eliminate the rows when the screen has a particular min-width. My question is: Does it is possible, using media queries, to eliminate or to change property to a div that has the role of table row, and make that div just like it don’t exists?
In fact if you see my code, if I comment the div that behaviours as rows I obtain the expected result, four cells, but I want that result only with a particular min-width of the screen. Or is it possible only using jquery?
I hope I have explained in a good way the problem, however, I don’t know if there are some other ways, but, using jQuery is there exists a way to remove a element without removing its children or its content?
I have tried in this way, but, my code seems buggy and with problems, can you help me to improve it?
So when the window is greater than 800px, the div with display: table-row become display: block, so through jquery I test if display property of that div is block, if yes, unwrap its children, else go to the initial state.
Can you take a look at this?
JsFiddle:
I have added in CSS:
@media all and (min-width: 800px) {
.row {
display: block;
}
}