I'm currently using my wordpress blog homepage with latest posts shown in 2 columns, which looks very nicely when visited by PC and Mac large screen but, at the same time, it's terrible when visited by mobile.

So I was wondering if I could use javascript or something else to change the <div> that splits the homepage into 2 column posts, into another <div> when visited not by large screens.

For example:

<script>
if ((!pc && !osx))
{ echo('<div class="half">';
}
else {echo('<div class="container">');
}
</script>

Any hint how to do?