¿Es posible mostrar un dropdown diferente dependiendo del dispositivo? con Bootstrap 5

Tengo el siguiente código que viene por defecto con el Bootstrap Auth de Laravel, lo que requiero es cambiar la dirección del contenido del dropdown dependiendo del tamaño de la pantalla del dispositivo

<div class="btn-group">
    <a href="#" class="btn btn-outline-light dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
        <i class="bi bi-person-circle"></i>
        <span class="textnone">{{ Auth::user()->name }}</span>
    </a>
    <ul class="dropdown-menu dropdown-menu-end">
       <li>
          <a class="dropdown-item" href="{{ route('home') }}">
              {{ __('Dashboard') }}
          </a>
       </li>
       <li><hr class="dropdown-divider"></li>
       <li>
           <a class="dropdown-item" href="{{ route('logout') }}" 
               onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
               {{ __('Logout') }}
           </a>

           <form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">
               @csrf
           </form>
       </li>
    </ul>
</div>

Cuando el tamaño de la pantalla sea sm muestre <div class="btn-group dropend"> y para el resto <div class="btn-group dropstart">