Быстрое решение: Переверните сторону, на которой отображаются сообщения DM на платформе социальных сетей

В функции DM на моей платформе социальных сетей я хотел бы, чтобы полученные сообщения отображались с левой стороны, а отправленные - с правой. В настоящее время все происходит наоборот вокруг.

(Отправленные сообщения (светло-розовые) = #D7A5EB, полученные сообщения (темно-розовые) = #CC64C3)

М уже некоторое время пробую и ошибаюсь, но он просто отказывается разрешать отправленные сообщения (т.е. те, которые отправил вошедший в систему пользователь) с правой стороны.

thread.html:

{% extends 'landing/base.html' %}
{% load crispy_forms_tags %}

{% block content %}

<div class="container">
    <div class="row">
        <div class="card col-md-12 mt-5 p-3 shadow-sm">
            {% if thread.receiver == request.user %}
                <h5><a href="{% url 'profile' thread.user.profile.pk %}"><img class="rounded-circle post-img" height="50" width="50" src="{{ thread.user.profile.picture.url }}" /></a> @{{ thread.user }}</h5>
            {% else %}
                <h5>@{{ thread.receiver }}</h5>
            {% endif %}
        </div>
    </div>

    {% if message_list.all.count == 0 %}
    <div class="row my-5">
        <div class="col-md-12">
            <p class="empty-text">No messages yet.</p>
        </div>
    </div>
    {% endif %}

    {% for message in message_list %}
    <div class="row">
        {% if message.sender_user == request.user %}
        <div class="col-md-12 my-1">
            {% if message.image %}
            <div class="message-sender-container ms-auto">
                <img src="{{ message.image.url }}" class="message-image" />
            </div>
            {% endif %}
            <div class="sent-message my-3">
                <p>{{ message.body }}</p>
            </div>
        </div>
            {% elif message.receiver_user == request.user %}
            <div class="col-md-12 offset-6">
                {% if message.image %}
                <div>
                    <img src="{{ message.image.url }}" class="message-image" />
                </div>
                {% endif %}
                <div class="received-message my-3">
                    <p>{{ message.body }}</p>
                </div>
            </div>
            {% endif %}
        </div>
    {% endfor %} 

    <div class="row">
        <div class="card col-md-12 p-3 shadow-sm">
            <form method="POST" action="{% url 'create-message' thread.pk %}" enctype="multipart/form-data">
                {% csrf_token %}
                {{ form | crispy }}
                
                <div class="d-grid gap-2 mt-3">
                    <button btn btn-light type="submit">Send Message</button>
                </div>
            </form>
        </div>
    </div>
</div>

{% endblock content %}

style.css:

.empty-text {
        color: #777;
        font-size: 1.5rem;
        text-align: center;
}

.sent-message {
        background-color: #d7a5eb;
        border-radius: 30px;
        padding: 10px 25px;
        width: 35%;
}

.received-message {
        background-color: #cc64c3;
        color: #000;
        border-radius: 30px;
        padding: 10px 25px;
        width: 35%;
}

.message-sender-container {
        margin-left: auto;
        margin-right: 0;
}

.message-image {
        border-radius: 10px;
        max-width: 35%;
        height: auto;
}

Вернуться на верх