Make div go under in flex container

Question

I'm trying to implement the following responsive behaviour for a navbar.

Here is the result I want on large screens:

And on small screens (Iphone 8 and similar):

I created the navbar using flexbox and the possible solution I have in mind is using flex-wrap: wrap; but I need to find a way to only make the two links (with tmp class) go down when the screen is small and keep the logo and the "S'inscrire" link up when the screen is small.

I'm not sure if flexbox is the best way to achieve that but it's what I tried, I'm open to any better solution.

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.navigation__items {
    display: flex;
    justify-content: space-between;
}

.tmp {}

.navigation__item {
    list-style: none;
}

.navigation__item a {
    text-decoration: none;
    color: inherit;
    padding: 11px 40px;
}

.navigation__item a:active {
    text-decoration: none;
    color: #0065fc;
    font-weight: bold;
    border-top: 2px solid #0065fc;
}

.subscribe {
    color: #0065fc;
    font-weight: bold;
}

@media only screen and (max-width: 500px) {
    .navigation__items {
        margin-top: 25px;
        width: 100%;
    }
}

<nav class="navigation">
   <img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
   <ul class="navigation__items">
      <div class="tmp">
         <li class="navigation__item"><a href="#">Hébergements</a></li>
         <li class="navigation__item"><a href="#">Activités</a></li>
      </div>
      <li class="navigation__item subscribe">
         <a href="#">S'inscrire</a>
      </li>
   </ul>
</nav>

PS: the div with "tmp" class doesn't originally exist in the code, I added it just to indicate the idea I have in mind.

Answer 1

Pay attention to your html structure of the <ul> tag. Inside you put the <div> tag, separating the third <li> tag from the first two. This is not correct and it is not a valid html structure. It's a crutch.

In my example, I set up the list structure correctly. All three <li> tags are now children of the <ul> tag.

Now about the main thing.

The very principle of the transfer of the third <li> tag (subscribe class) is based on absolute positioning.

Wrapping the first two <li> tags is triggered at 767px width.

And yet, in my example, I did not use other types of display, such as grid, table, block, etc. Only flex is used.

Also, the underline on click is adjusted.

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.navigation img { /*for test*/
    width: 100px;
}

.navigation__items {
    display: flex;
    justify-content: space-between;
    padding: 0;
}

.navigation__item {
    list-style: none;
}

.navigation__item a {
    text-decoration: none;
    color: inherit;
    padding: 11px 40px;
}

.navigation__item a:active {
    text-decoration: none;
    color: #0065fc;
    font-weight: bold;
    border-top: 2px solid #0065fc;
}

.subscribe {
    color: #0065fc;
    font-weight: bold;
}

@media (max-width: 500px) {
    .navigation__items {
        margin-top: 25px;
        /*width: 100%;*/
    }
}

@media (max-width: 767px) {
    .navigation {
        position: relative;
    }
    
    .navigation__items {
        width: 100%;
    }
    
    .navigation__item a {
        display: flex;
        justify-content: center;
        padding: 11px 0;
    }
    
    .navigation__item {
        flex: auto;
        text-align: center;
    }
    
    .navigation__item.subscribe {
        position: absolute;
        top: 0;
        right: 0;
    }
    
    .navigation__item a:active {
        border-top: unset;
        border-bottom: 2px solid #0065fc;
    }
}

<nav class="navigation">
    <img src="https://i.ibb.co/LDTTHj3/2021-01-18-13-00-56.png" alt="Logo Reservia" />
    <ul class="navigation__items">
        <li class="navigation__item"><a href="#">Hébergements</a></li>
        <li class="navigation__item"><a href="#">Activités</a></li>
        <li class="navigation__item subscribe"><a href="#">S'inscrire</a></li>
    </ul>
</nav>

Answer 2

So, this is the layout and how things could be grouped, right? (small-screen-first of course)

You can totally do this with grid as well - but here's how I'd do it with flex-box;

you can use flex's order

and A few margin: autos in there.

https://codepen.io/sheriffderek/pen/a16a64f1910cbd05116dd1a9ae37a372?editors=1100

/* reset included */
* {
    box-sizing: border-box;
}


header {
    /* probably has a column in it */
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.logo {
    display: block;
}
.thing {
    display: block;
    margin-left: auto; /* trick */
}
.site-menu {
    width: 100%;
    display: flex;
    flex-direction: row;
}
.link {
    display: block;
    flex-basis: 50%;
}

@media (min-width: 600px) {
    header {
        justify-content: flex-end;
    }
    .logo {
        margin-right: auto; /* trick */
    }
    .thing {
        order: 5;
        margin-left: unset; /* override */
    }
    .site-menu {
        width: auto;
    }
}


header {
    border: 4px solid dodgerblue;
}
.logo {
    border: 4px solid orange;
    padding: 10px;
}
.thing {
    border: 4px solid yellow;
    padding: 10px;
}
.site-menu {
    border: 4px solid lime;
}
.link {
    border: 4px solid #ff0066;
    padding: 10px;
}

<header>
    <a class='logo'>
        SVG LOGO
    </a>
    
    <a class='thing'>
        thing
    </a>
    
    <nav class='site-menu'>
        <a class='link'>
            link 1
        </a>
        
        <a class='link'>
            link 2
        </a>
    </nav>
</header>

Answer 3

Possible Solution:

Change position and layout properties

In mobile, I've changed the parent navigation element's display and position property to block and relative.As a result, the banner and navigation__items element would not come under flexbox modal.

Now we want the temp element to take 100% width, for this, I've changed the flex property to 0 0 100%.

To show the 'subscribe' button on the top right corner, add its position property to absolute.

.navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.navigation__items {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    padding: 0;
}

.tmp {
    display: flex;
    flex-wrap: nowrap;
}

.tmp .navigation__item {
    flex: 0 0 50%;
}

.navigation__item {
    list-style: none;
}

.navigation__item a {
    text-decoration: none;
    color: inherit;
    padding: 11px 40px;
}

.navigation__item a:active {
    text-decoration: none;
    color: #0065fc;
    font-weight: bold;
    border-top: 2px solid #0065fc;
}

.subscribe {
    color: #0065fc;
    font-weight: bold;
}

@media screen and (max-width: 767.98px) {

    .navigation {
        display: block;
        position: relative;
    }

    .tmp {
        flex: 0 0 100%;
    }

    .subscribe {
        position: absolute;
        top: 0;
        right: 0;
    }
}

<nav class="navigation">
    <img src="./assets/images/logo/Reservia.svg" alt="Logo Reservia" />
    <ul class="navigation__items">
       <div class="tmp">
          <li class="navigation__item"><a href="#">Hébergements</a></li>
          <li class="navigation__item"><a href="#">Activités</a></li>
       </div>
       <li class="navigation__item subscribe">
          <a href="#">S'inscrire</a>
       </li>
    </ul>
</nav>