Использование flexbox (порядок) для организации и упорядочения нескольких div

Question

Я создал несколько div с несколькими флажками, я хотел бы изменить положение каждого из них, используя flex box, точнее функцию order. Пример: Div: Age Флажок: новый, старый, ребенок

Div: Music Флажок: New musi c, Old musi c

Я хотел бы поставить musi c div в первую очередь с использованием только flex box order.

<div id="TEST" class="col-md-6 col-sm-6 col-xs-12">
                    <div class="narrow-title odd">TEST</div>
                    <div class="odd">
                        <ul class="selec-design block-metal">
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST_2272" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST"><span></span>TEST<input type="checkbox" id="TEST_2239" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST_1796" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                            <li>
                                <a href="TEST">
                                    <span></span>TEST<input type="checkbox" id="TEST_2237" name="TEST" value="TEST" style="display:none;">
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

Answer 1

Прежде всего, никогда не используйте идентификатор дважды. Они должны быть уникальными.

Теперь, если вы хотите упорядочить элементы с помощью flex box, просто дайте дочерним элементам атрибут order в вашем CSS.

Вот пример используя divs. Возможно, вам придется поиграть с вашим дисплеем и позицией, чтобы заставить его работать с элементами списка.

#TEST {
  display: flex;
  flex-direction: column;
}
#TEST ul, 
#TEST li {
  display: block;
}
#TEST1 {
  order: 1;
}
#TEST2 {
  order: 2;
}
#TEST3 {
  order: 3;
}
#TEST4 {
  order: 4;
}
#TEST5 {
  order: 5;
}
#TEST6 {
  order: 6;
}
#TEST7 {
  order: 7;
}
#TEST8 {
  order: 8;
}

<div id="TEST" class="col-md-6 col-sm-6 col-xs-12">
      <div id="TEST1">TEST1 
        <input type="checkbox" name="TEST" value="TEST">
      </div>
      <div id="TEST8">TEST8 
        <input type="checkbox" name="TEST" value="TEST">
      </div>
      <div id="TEST2">TEST2 
        <input type="checkbox" name="TEST" value="TEST">
      </div>
      <div id="TEST3">TEST3 
        <input type="checkbox" name="TEST" value="TEST">
      </div>      
      <div id="TEST5">TEST5 
        <input type="checkbox" name="TEST" value="TEST">
      </div>
      <div id="TEST6">TEST6 
        <input type="checkbox" name="TEST" value="TEST">
      </div>
      <div id="TEST7">TEST7 
        <input type="checkbox" name="TEST" value="TEST">
      </div>
      <div id="TEST4">TEST4 
        <input type="checkbox" name="TEST" value="TEST">
      </div>
</div>