我想建立一个简单的网页，其标题看起来像这样：

header {
  display: flex;
  justify-content: space-between;
}

#header {
  flex-grow: 1;
  display: flex;
  flex-wrap: wrap;
}

#titre {
  display: inline-block;
}

nav {
  display: inline-flex;
}

nav a {
  display: inline-block;
}

#lang {
  flex-grow: 0;
  flex-shrink: 0;
}

<header>
  <div id="header">
    <a id="titre" href="...">John Doe</a>
    <nav>
      <a href="...">...</a>
      <a href="...">...</a> ...
    </nav>
  </div>
  <div id="lang">...</div>
</header>

当#title和nav在一行中时，我希望这样：single-line version of what i want
否则，我希望所有这些元素都逐行显示：multiple-line version of what i want
是否可以只使用CSS来实现这一点，比如条件化#header是否被 Package ？