Как поменять местами два элемента внутри ul -> li
Я использую библиотеку ng-multiselect-dropdown для создания раскрывающегося списка с возможностью выбора нескольких вариантов (флажок и метка). Все отлично работает, как показано на картинке.
<div>
<ul class = "item2" style = "max-height: 197px;">
<li class = "multiselect-item-checkbox ng-star-inserted" style = "">
<input aria-label = "multiselect-item" type = "checkbox">
<div>test3</div>
</li>
<li class = "multiselect-item-checkbox ng-star-inserted" style = "">
<input aria-label = "multiselect-item" type = "checkbox">
<div>test1</div>
</li>
</ul>
</div>
Мне нужно перевернуть элементы в режиме RTL. Пробовал добавлять такие свойства как: direction = "rtl";, display: flex;, flex-direction: row-reverse;, flex-wrap: wrap;
Но мне не удалось повернуть элементы вспять.
Короче говоря, я пытаюсь добиться следующего:
Заранее большое спасибо.
@DavidThomas, это пример сохранения в качестве владельцев библиотек в nileshpatel17.github.io/ng-multiselect-dropdown. Я могу создать пример plnkr, если это необходимо.
Ответы 2
Я бы использовал display: flex; и flex-direction: column-reverse; - они в столбце/под другом...
Вот jsbin: https://jsbin.com/hijagigave/1/edit?html, css, вывод
Кажется, он работает с flex-direction: row; на li, если я явно устанавливаю атрибут dir на предке.
.multiselect-item-checkbox {
display: flex;
flex-direction: row;
}
Можете ли вы показать соответствующий код «минимальный воспроизводимый пример», который вы используете, в идеале — исполняемый фрагмент.