How to change items position in small devices in tailwindcss

Issue

This is my code. But on mobile devices the Connect button is on the left as shown in the image below: .

I want to move connect button to the right on mobile devices just before the discod button.

This is my code:

export function SiteHeader() {
  return (
    <header className="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container flex h-14 max-w-screen-2xl items-center">
        <MainNav />
        <MobileNav />
        <div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
          <div className="w-full flex-1 md:w-auto md:flex-none">
            <Button>Connect</Button>
          </div>
          <nav className="flex items-center">
            <Link
              href=""
              target="_blank"
              rel="noreferrer"
            >
              <div
                className={cn(
                  buttonVariants({
                    variant: "ghost",
                  }),
                  "w-9 px-0"
                )}
              >
                <Icons.discord className="h-4 w-4" />
                <span className="sr-only">Discord</span>
              </div>
            </Link>
            <Link
              href=""
              target="_blank"
              rel="noreferrer"
            >
              <div
                className={cn(
                  buttonVariants({
                    variant: "ghost",
                  }),
                  "w-9 px-0"
                )}
              >
                <Icons.twitter className="h-3 w-3 fill-current" />
                <span className="sr-only">Twitter</span>
              </div>
            </Link>
            <ModeToggle />
          </nav>
        </div>
      </div>
    </header>
  );
}

Solution

Change

<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
  <div className="w-full flex-1 md:w-auto md:flex-none">

to

<div className="flex flex-1 items-center space-x-2 justify-end">
  <div className="w-auto flex-none">

We transpose the md: classes to have no variants. This will mean they will apply for all viewports i.e. now including "mobile". At the same time, we remove conflicting classes.

<script src="https://cdn.tailwindcss.com/3.4.0"></script>

<header class="fixed top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
  <div class="container flex h-14 max-w-screen-2xl items-center">
    <MainNav>MainNav</MainNav>
    <MobileNav>MobileNav</MobileNav>
    <div class="flex flex-1 items-center space-x-2 justify-end">
      <div class="w-auto flex-none">
        <Button>Connect</Button>
      </div>
      <nav class="flex items-center">
        <Link
          href=""
          target="_blank"
          rel="noreferrer"
        >
          <div
            class="w-9 px-0"
          >
            <Icons.discord class="h-4 w-4">Icons.discord</Icons.discord>
            <span class="sr-only">Discord</span>
          </div>
        </Link>
        <Link
          href=""
          target="_blank"
          rel="noreferrer"
        >
          <div
            class="w-9 px-0">
            <Icons.twitter class="h-3 w-3 fill-current">Icons.twitter</Icons.twitter>
            <span class="sr-only">Twitter</span>
          </div>
        </Link>
        <ModeToggle>ModeToggle</ModeToggle>
      </nav>
    </div>
  </div>
</header>

Answered By - Wongjn