将复选框组件的框移到标签的右侧

Question

我是vue的新手。我可以问一下这个吗？因此，我有复选框组件，我想将"；框"；在其他组件中标签文本的右侧(例如，卡片，默认情况下，框在左侧(。但我希望它像一个槽，有条件的，或者可能使用props/modifier(这样我就可以选择需求，是左复选框还是右复选框(。有可能吗？这是我的代码

卡片组件上的复选框：

<template>
//component code
<Checkbox  class="my-checkbox" ref="myCheckbox" v-model="checkedValue" v-if="multiselect"><slot>{{ text }}</slot></Checkbox>

//component code
</template>

复选框模板：

<div class="my-cb">
<input
:id="cb"
v-model="computedValue"
type="checkbox"
:disabled="disabled"
:required="required">
<label :for="cb">
<slot />
</label>
</div>

编辑：感谢Lais Frigerio，完美解决

Answer 1

使用flexbox的代码示例：

.flex {
display: flex;
}
.left label { order: 2; }
.left input { order: 1; }
.right label { order: 1; }
.right input { order: 2; }

<div class="flex left">
<input type="checkbox" />
<label>Teste 2</label>
</div>
<div class="flex right">
<input type="checkbox" />
<label>Teste 2</label>
</div>