How to render different Html everytime second loop runs php

I have a page where I am displaying data from the database with PHP. I want to use the second HTML every time the second loop is executed.

let's say we have 4 courses eg:

• 1st course (default Html)
• 2nd course (second Html)
• 3rd course (default Html)
• 4th course (second Html)

I have tried doing if ($i % 2 == 0) { // render second html } it works but it renders the same course twice.

How can I do this?

$i = 0;
<?php if (mysqli_num_rows($courses) < 1) { ?>
    <h4>No courses found.</h4>
    <?php } else {
    while ($course = mysqli_fetch_assoc($courses)) {
    ?>
        <div class="rs-history sec-spacer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-6 col-md-12 rs-vertical-bottom mobile-mb-50">
                        <a href="#">
                            <img src="<?= $course['media'] ?>" alt="History Image" />
                        </a>
                    </div>
                    <div class="col-lg-6 col-md-12">
                        <div class="abt-title">
                            <h2><?= $course['title'] ?></h2>
                        </div>
                        <div class="about-desc">
                            <p><?= $course['description'] ?></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <?php
        if ($i % 2 == 0) {
        ?>
            <div class="rs-mission sec-color sec-spacer">
                <div class="container">
                    <div class="row">
                        <div class="col-lg-6 col-md-12 mobile-mb-50">
                            <div class="abt-title">
                                <h2><?= $course['title'] ?></h2>
                            </div>
                            <div class="about-desc">
                                <p><?= $course['description'] ?></p>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 rs-vertical-bottom mobile-mb-50">
                            <a href="#">
                                <img src="<?= $course['media'] ?>" alt="History Image" />
                            </a>
                        </div>
                    </div>
                </div>
            </div>
<?php    }
    }
} ?>