How to change position during adaptation?

Question

css

HTML:

<header>
      <div class="container">
        <div class="main row justify-content-between align-items-center">
          <div class="col-md-auto logo">
            <img src="css/img/logo.png" alt="">
          </div>
          <menu class="col-md-auto">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
          </menu>
        </div>
      </div>
    </header>

SCSS:

.main {
  background-color: pink;
}

menu{
  display: flex;
  list-style: none;
  & li{
    margin-right: 50px;
  }
}

When the screen is reduced, the elements stand in new rows, as they should be. And how to make it so that, when changing, the blocks are pressed, for example, to the end of the axis?

Answer 1

Set media queries to the correct position for the required screen size.