用css改变位置（翻转）两个元素

Question

我有以下div，其中包含输入和标签。

<div class="js-form-item ">

    <input  type="checkbox" id="checkboxes-11" class="type-checkboxes form-checkbox"> 

    <label for="option-a-checkboxes-11" class="option">
        Factures  11chf
    </label>

    <div class="option-price-style">  </div>
</div>

输入显示在标签之前，但我试图颠倒顺序，以便标签可以在输入之前出现。我尝试过这样做，输入display:block并用margin-bottom:1px向下拉，但它不起作用

Answer 1

如果将它们设置为float: right，它们将以相反的顺序显示。

如果它没有给出所需的结果，例如，您希望它们垂直堆叠，您可以使用边距或填充来改变元素的位置。

Answer 2

我认为你无法撤销订单，因为你的css看起来有点像这样：

input > label {}

有一种方法可以使用flexbox执行此操作：

div {
  display: flex;
  flex-direction: column;
}
input {
  order: 2;
}
label {
  order: 1;
}

https://jsfiddle.net/nzzqehog/2/