Bootstrap 4 如何更改切换菜单中的位置

我想改变我的切换导航栏的位置。 在md和更大的版本中，我有一个：名称-图片-按钮， 但在切换菜单中，我想显示在反向-图片名称按钮中。 我该怎么做

    <ul class="navbar-nav d-flex ">

    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span>Mark Hohmann</span>
          <img src="https://evdo8pe.cloudimg.io/s/resizeinbox/400x400/http://b2bnew.widmannsrl.com/ImmaginiSitoB2B/Articoli/max/C6366_nc__C6366_a.jpg" alt="foto" class="rounded-circle ml-1" height="50" width="50">
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
            <a class="dropdown-item" href="#">Settings</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Sign Out</a>
        </div>
    </li>           
    </ul>

您需要更改元素顺序，如下所示：

<ul class="navbar-nav d-flex ">

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

      <img src="https://evdo8pe.cloudimg.io/s/resizeinbox/400x400/http://b2bnew.widmannsrl.com/ImmaginiSitoB2B/Articoli/max/C6366_nc__C6366_a.jpg" alt="foto" class="rounded-circle ml-1" height="50" width="50">
       <span>Mark Hohmann</span>
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
        <a class="dropdown-item" href="#">Settings</a>
        <div class="dropdown-divider"></div>
        <a class="dropdown-item" href="#">Sign Out</a>
    </div>
</li>           
</ul>

请包含完整的导航条形码