React-bootstrap: обратный флажок, поэтому текст метки стоит первым

Question

У меня есть флажок, сгенерированный response-bootstrap, и он отображается как метка, содержащая входной тег и заголовок метки. Я хочу, чтобы заголовок был первым.

Флажок от реакции-начальной загрузки:

<Checkbox
   checked={checkedStatus}
   onChange={(e) => this.handleToggle(e, checkBoxValue)}
>{title}</Checkbox>

Визуализированный HTML:

<div class="checkbox">
    <label title="">
        <input type="checkbox" value="">
        Did not perform
    </label>
</div>

Выход:

Answer 1

Я использовал flex, чтобы решить эту проблему, изменив направление строки.

HTML:

<div class="checkbox">
    <label title="">
        <input type="checkbox" value="">
        Did not perform
    </label>
</div>

CSS:

div.checkbox {
  display: inline-block;
  /*ie7 -- start*/
  *display: inline;
  zoom: 1;
}

div.checkbox > label {
  display: flex;
  flex-direction: row-reverse;
}

Выход:

JSFiddle: здесь