Как на flexbox перенести последний блок под предпоследний?

Question

[artuh_a]

Добрый день!

Верстаю меню. У 1-ых двух пунктов есть по одному вложенному меню, у последних 2-ух нет. Задача, чтобы первые 2 пункта были друг за другом в линию, а последние 2 друг под другом.

Выглядит это так -

Делаю на флексбоксах, вот мой пример.

Answer 1

[ⓒⓢⓢ]

так объедините последние две ссылки в один контейнер li? и сделайте эти ссылки блочными

Comments

[artuh_a]

Или position: relative последнему пункту, я хочу какое-то более элегантное решение без костылей.

[WapSter]

artuh_a, это не костыль, а решение вашей задачи, либо используйте гриды

[ⓒⓢⓢ]

artuh_a, я предлагаю так, если и вы так же поняли, и это для вас костыль, то просто проигнорируйте ответ

<ul>
  <li>
    <!-- жёлтый блок -->
  </li>
  <li>
    <!-- зелёный блок -->
  </li>
  <li>
    <!-- красная ссылка -->
    <!-- синяя ссылка -->
  </li>
</ul>

[artuh_a]

JRK_DV, да, про другое подумал. Спасибо, сделал вашим способом!