看起来你遇到的核心问题是：在小屏幕下，Bootstrap的navbar默认会切换成垂直flex布局（flex-direction: column），导致你的汉堡按钮和logos-top图片上下排列，而不是同一行。结合你的需求——大屏时图片在菜单右侧，小屏时和汉堡按钮同水平，我们可以通过调整结构+少量自定义CSS来完美解决，不需要复杂的定位。

第一步：调整导航栏结构 #

我们需要把汉堡按钮、折叠菜单区域、图片这三个部分重新组织，让汉堡按钮和图片分别在折叠区域的两侧，同时利用Bootstrap的flex类确保它们在小屏时能保持同一行：

{% load static %}
{% block content %}
<header>
<div class="container-fluid border">
<div class="row bg-orange">
<div class="container-fluid">
<div class="ml-1 margin-top-bot float-left">
<div class="phone">
<i class="fas fa-phone ml-5"></i>
<span class="ml-1 bara-mica-text">074 444 4444</span>
</div>
<div class="email">
<i class="fas fa-envelope ml-5"></i>
<span class="ml-1 bara-mica-text">bestdavnic73@gmail.com</span>
</div>
</div>
<div class="mr-2 margin-top-bot float-right">
<span class="mr-5"><a href="#" class="mr-5">Login</a></span>
<span class="mr-5"><a href="#" class="mr-5">Register</a></span>
</div>
</div>
</div>
<!-- 修改后的nav结构 -->
<nav class="navbar navbar-expand-custom navbar-light navbar-custom d-flex align-items-center">
  <!-- 汉堡按钮：放在左侧 -->
  <button class="navbar-toggler order-1" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- 折叠菜单区域：放在中间，占据剩余空间 -->
  <div class="collapse navbar-collapse order-3 flex-grow-1" id="navbarSupportedContent">
    <a class="navbar-brand" href="/"><img src="{% static 'img/logo.jpg' %}" class="logo"></a>
    <ul class="navbar-nav mx-auto">
      <li class="nav-item mr-2 active">
        <a class="nav-link buton-top-home" href="/">Acasa <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">Cine suntem?</a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">Cum te sustinem?</a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">Proiect 1</a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">Proiect 2</a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">Consultanta</a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">Mediere</a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">Portofoliu</a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">FAQ</a>
      </li>
      <li class="nav-item mr-2">
        <a class="nav-link buton-top-home" href="#">Contact</a>
      </li>
    </ul>
  </div>

  <!-- logos-top图片：放在右侧 -->
  <div class="logos-top-wrapper order-2 ml-3">
    <img src="{% static 'img/logos.jpg' %}" class="logos-top">
  </div>
</nav>
</div>
</header>
{% endblock %}

第二步：添加自定义CSS覆盖默认折叠布局 #

默认情况下，当屏幕小于你的navbar-expand-custom断点时，Bootstrap会给navbar加上flex-direction: column，导致元素上下排列。我们需要强制它保持水平布局：

/* 替换成你的navbar-expand-custom对应的断点宽度，比如如果是md断点，就用max-width: 767px */
@media (max-width: 你的自定义断点宽度) {
  .navbar-custom {
    flex-direction: row !important;
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  /* 确保汉堡按钮和图片不会被挤压变形 */
  .navbar-toggler {
    flex-shrink: 0;
  }

  .logos-top-wrapper {
    flex-shrink: 0;
  }
}

为什么这样有效？ #

1. 我们用order-*类调整了元素的显示顺序：大屏时，折叠区域（order-3）会占据中间空间，汉堡按钮（order-1）会被隐藏（因为navbar-expand-custom），图片（order-2）在右侧，完全符合你的需求。
2. 小屏时，通过CSS强制navbar保持水平flex布局，汉堡按钮和图片分别在左右两侧，同一行显示，折叠菜单隐藏后也不会错位。
3. flex-shrink: 0确保按钮和图片不会被挤压变形，保持原有大小。

这样既不需要复杂的定位，又完美兼容大屏和小屏的布局需求～

内容的提问来源于stack exchange，提问作者octnic