Изменение расположения объекта объектов flexbox

Question

Адаптирую сайт для мобилок и нужно, чтобы элементы могли строится сразу двумя такими способами. Сама проблема в том, что не понимаю как расставить элементы в css flexbox, чтобы потом спокойно прописать через @media два варианта:

Сама верстка на данный момент такая:

<header>
  <div class="logo">
    <a href="index.html">
      <img src="Images/logo.png" alt="Лого не прогрузилось">
    </a>
  </div>
  <div class="title">
    <h1>Project Moon Role-Play</h1>
  </div>
  <nav>
    <ul class="menu">
      <li>
        <a href=""></a>
      </li>
      <li>
        <a href="pages/rules.html"></a>
      </li>
    </ul>
    <ul class="menu">
      <li>
        <a href="pages/map.html"></a>
      </li>
      <li>
        <a href="pages/storyline.html"></a>
      </li>
    </ul>
    <ul class="menu">
      <li>
        <a href="pages/char-list.html"></a>
      </li>
      <li>
        <a href="https://discord.gg/"></a>
      </li>
    </ul>
  </nav>
</header>

(списки в списках используются, чтобы меню складывалось в колонки при уменьшении экрана)

Answer 1

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: auto;
  min-height: 100vh;
  background-color: #262626;
}

body * {
  border: 1px solid orange;
}

menu {
  padding: 10px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "li-I li-II li-II" "li-I li-II li-II" "li-III li-III li-III";
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

li {
  list-style: none;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: orange;
}

li:nth-child(1) {
  grid-area: li-I;
}

li:nth-child(2) {
  grid-area: li-II;
}

li:nth-child(3) {
  grid-area: li-III;
}

<nav>
  <menu>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </menu>
</nav>

Вариант 2:

* {
  padding: 0;
  margin: 0;
}

html,
body {
  height: auto;
  min-height: 100vh;
  background-color: #262626;
}

body * {
  border: 1px solid orange;
}

menu {
  padding: 10px;
  display: grid;
  grid-gap: 10px;
  grid-template-areas: "li-I li-II li-II" "li-I li-II li-II" "li-I li-III li-III";
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(3, 1fr);
}

li {
  list-style: none;
  font-size: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: orange;
}

li:nth-child(1) {
  grid-area: li-I;
}

li:nth-child(2) {
  grid-area: li-II;
}

li:nth-child(3) {
  grid-area: li-III;
}

<nav>
  <menu>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </menu>
</nav>

БЛОГ НА HUSL

Изменение расположения объекта объектов flexbox

Ответы (1 шт):