Swap icons mobile desktop

2025-11-25 13:07 UTC gpt-5-1-thinking Open in ChatGPT ↗

        <div class="d-flex flex-column justify-content-center" style="gap: 1rem">

            <!-- Masthead Subheading  ======================================================== -->
            <h6 class="masthead-subheading font-weight-light mb-0"
                style="text-align: center">{{ model.subheading }}</h6>

            <p class="small text-light mt-3s" style="text-align: center">LONDON x ATHENS</p>

            <!-- SOCIAL MEDIA ICONS SHOULD GO HERE ON MOBILE -->
        </div>

        <div class="container" style="display: flex; flex-direction: column; align-items: center; justify-content: end">

            <div class="awards-row">
                {% for award in awards %}
                    {% if award.featured == True %}
                    <a href="{{ award.url }}" target="_blank" rel="noopener">
                        <img class="awards-logo" src="{{ localpath }}/content{{ award.logo }}"></img>
                    </a>
                    {% endif %}
                {% endfor %}
            </div>

            <!-- SOCIAL MEDIA ICONS SHOULD GO HERE ON DESKTOP ======================================================== -->
            <div class="masthead-icons">

                {% for social in model.socials %}
                <a style="color: white; font-size: large;" href="{{ social.url }}">
                    <i class="bi bi-{{ social.name }}" aria-hidden="true"></i>
                </a>
                {% endfor %}

                <a style="color: white; font-size: large;" href="https://goo.gl/maps/ZcBrX6tsvrRdkXAX8">
                    <i class="bi-geo-alt" aria-hidden="true"></i>
                </a>
            </div>
        </div>
    </div>

I want to swap the position of social media icons depending on mobile vs desktop

You can do this purely with responsive classes: render the icons twice in the markup (one “copy” for mobile, one for desktop) and show/hide them with CSS / Bootstrap utilities.

1. Put the mobile icons where your comment is

<div class="d-flex flex-column ulc-masthead-bottom-half">

    <div class="d-flex flex-column justify-content-center" style="gap: 1rem">

        <!-- Masthead Subheading  ======================================================== -->
        <h6 class="masthead-subheading font-weight-light mb-0"
            style="text-align: center">{{ model.subheading }}</h6>

        <p class="small text-light mt-3s" style="text-align: center">LONDON x ATHENS</p>

        <!-- SOCIAL MEDIA ICONS ON MOBILE -->
        <div class="masthead-icons d-flex justify-content-center d-md-none">
            {% for social in model.socials %}
            <a style="color: white; font-size: large;" href="{{ social.url }}">
                <i class="bi bi-{{ social.name }}" aria-hidden="true"></i>
            </a>
            {% endfor %}

            <a style="color: white; font-size: large;" href="https://goo.gl/maps/ZcBrX6tsvrRdkXAX8">
                <i class="bi-geo-alt" aria-hidden="true"></i>
            </a>
        </div>
    </div>

    <div class="container" style="display: flex; flex-direction: column; align-items: center; justify-content: end">

        <div class="awards-row">
            {% for award in awards %}
                {% if award.featured == True %}
                <a href="{{ award.url }}" target="_blank" rel="noopener">
                    <img class="awards-logo" src="{{ localpath }}/content{{ award.logo }}"></img>
                </a>
                {% endif %}
            {% endfor %}
        </div>

        <!-- SOCIAL MEDIA ICONS ON DESKTOP ======================================================== -->
        <div class="masthead-icons d-none d-md-flex">
            {% for social in model.socials %}
            <a style="color: white; font-size: large;" href="{{ social.url }}">
                <i class="bi bi-{{ social.name }}" aria-hidden="true"></i>
            </a>
            {% endfor %}

            <a style="color: white; font-size: large;" href="https://goo.gl/maps/ZcBrX6tsvrRdkXAX8">
                <i class="bi-geo-alt" aria-hidden="true"></i>
            </a>
        </div>
    </div>
</div>

Key bits:

d-md-none → show on mobile, hide on md and up
d-none d-md-flex → hide on mobile, show as flex on md and up

So on small screens the icons appear under the subheading; on desktop they appear next to the awards as you had originally.

2. If you don’t want duplicate markup

You can instead rely on flexbox order + media queries: give awards and icons their own wrappers, and change the order in CSS. Rough idea:

<div class="container masthead-layout">
  <div class="awards-row">...</div>
  <div class="masthead-icons">...</div>
</div>

.masthead-layout {
  display: flex;
  flex-direction: column;
}

.awards-row { order: 2; }
.masthead-icons { order: 1; }  /* icons above awards on mobile */

@media (min-width: 768px) {
  .awards-row { order: 1; }
  .masthead-icons { order: 2; } /* icons below/after awards on desktop */
}

But given your existing structure and Bootstrap, the two-block + d-none / d-md-* approach is the quickest drop-in.