Отображение второго элемента <span>перед первым

Question

Я пытаюсь отобразить второй элемент-брат перед первым - с некоторыми серьезными ограничениями:

Я не могу изменить HTML или использовать javascript или jQuery.

Я могу использовать только CSS.

Я не могу изменить способ присвоения классов (опять же, у меня нет доступа для изменения какого-либо кода, кроме одного сделанного на заказ файла CSS).

В левом меню представлен ряд вышеупомянутых HTML-структур, создающих интерактивное меню для разделов на странице. Когда раздел страницы завершен, класс «завершенный раздел» добавляется в первый диапазон (как показано выше). Вот что вызывает у меня проблемы:

Стиль CSS для кнопки «nav» ссылки nav должен измениться, когда он будет завершен, но, поскольку я не могу получить доступ к родительскому элементу элемента, выбранного с помощью CSS, мне нужно внести эти изменения непосредственно в диапазон «номер меню» элемент, включая цвет фона размера nav-link. Таким образом, я сделал номер меню того же размера, что и содержащая «навигационная ссылка». Но когда я добавляю цвет фона к «номеру меню», текст на втором экране затеняется.

Как я могу «переместить» второй интервал перед первым, чтобы я мог видеть его текст?

Я также пытался сделать оба диапазона позициями абсолютными или позиционными относительными и использовал z-index, но это вытягивает интервалы из потока документа и означает, что ширина меню сворачивается. Я не могу установить ширину в жестко запрограммированное значение, потому что меню переключает открытое и закрытое по ширине (без установки класса), а переключаемая ширина устанавливается с помощью javascript, к которому, опять же, я не могу получить доступ.

Я также попытался использовать display: flex для элемента 'a' и изменить порядок элементов span. Не повезло.

В полу отчаянии я попытался установить для свойства direction на nav-link значение rtl. Не повезло.

Думаю, я тоже попробовал несколько других вещей, но сейчас я заверну этот вопрос.

Любые указатели, высоко ценится ...

.menu-number {
	border: none;
	border-left: 10px solid transparent;
	border-radius: 0px;
	padding-top: 13px;
	padding-left: 20px;
	height: 45px;
	position: absolute;
	width: 100%;
	text-align: left;
	z-index: 100;
    float: left;
}
.menu-number + span {
	/*position: absolute;*/
	padding-left: 40px;
	z-index: 200;
}
.completed-section {
	color: #42bb76 !important;
	border-left: 10px solid #42bb76;
	background-color: #274d56;
	text-decoration: underline;
}
.nav-link > div > a {
	display: flex;
	*/flex-direction: row-reverse;*/
}
.nav-link > div > a > span:nth-of-type(1) {
    order: 2;
}
.nav-link > div > a > span:nth-of-type(2) {
    order: 1;
}
.nav-link > div > a > .section-name {
color: white;
padding: 13px 20px 0px 60px;
height: 45px;
    float: left;
}

<div class="nav-link">
    <div>
        <a href="scroll/to/section">
            <span class="menu-number completed-section">1.</span>
            <span class="section-name">Section name</span>
        </a>
    </div>
</div>

Я также попробовал 'flex-direction', но сейчас прокомментировал это.

Answer 1

Вы можете достичь этого, используя CSS order свойство:

Вот скрипка:

.menu-number {
  order: 2;
}

.section-name {
  order: 1;
}

.nav-link a{
  display: flex;
}

<div class="nav-link">
  <div>
    <a href="scroll/to/section">
      <span class="menu-number completed-section">1.</span>
      <span class="section-name">Section name</span>
    </a>
  </div>
</div>