How can I display a layout differently depending on whether the user is on Mobile or PC?

I am currently working on a website for which I have to display the different features of a product. When imagining the design, I had a very different layout for mobile and PC that would, in my opinion, be too difficult to achieve with just media queries and CSS; the layout is so different that it affects the order in which the containers are displayed.

When it came to mobile, I wanted to achieve something like this:

• title of the feature
• description
• example image

All in one column, since it is a small device, so it is straight forward. For PC though, I wanted to work on a two column layout, which would have the image on the left column and the text on the right one, and switch it around for every feature. It is a bit difficult to put in words how exactly I imagined it, so here's my code and how I see it:

<div class="container-fluid"> <!-- I use Custom Fields and get the data in a $table --> <?php $table = CFS()->get('features'); ?> <!-- I work my way through all the table fields --> <?php for ($i = 0; $i <= $count; $i++): ?> <!-- Here I imagine some sort of way to check if the user is on mobile --> <?php if ($isMobile): ?> <!-- The layout for mobile --> <div class="row mb-5"> <div class="col-12"> <h2 class="mb-3"><?= $table[$i]['features-title']; ?></h2> <p><?= $table[$i]['features-text']; ?></p> <img src="<?= $table[$i]['features-img']; ?>" alt="Example"> </div> </div> <!-- not mobile then PC layout --> <?php else: ?> <div class="row"> <!-- Simple modulo for pictures on the left column with the text on the right column and vice versa --> <?php if ($i % 2 == 0): ?> <div class="col-6"> <img src="<?= $table[$i]['features-img']; ?>" alt="Example"> </div> <div class="col-6"> <h2 class="mb-3"><?= $table[$i]['features-title']; ?></h2> <p><?= $table[$i]['features-text']; ?></p> </div> <?php else: ?> <div class="col-6"> <h2 class="mb-3"><?= $table[$i]['features-title']; ?></h2> <p><?= $table[$i]['features-text']; ?></p> </div> <div class="col-6"> <img src="<?= $table[$i]['features-img']; ?>" alt="Example"> </div> <?php endif; ?> </div> <?php endif; ?> <?php endfor; ?> </div> 

Ultimately, what I am trying to ask is, how can I manage to make such a different layout between mobile and PC without making it too complex through media queries and CSS? It seems to me that this would be difficult to achieve with just those, and might make the website break too easily.

I apologize if it isn't explained very well. I am not the greatest web developer and still very much learning, so any feedback on my code and answers to my question are appreciated.