React-bootstrap: Reverse checkbox input so the lab

问题:

I have a checkbox generated by react-bootstrap and it's rendered like a label containing input tag and label title. I want to have it so that the label title comes first.

Checkbox from react-bootstrap:

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

Rendered HTML:

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

Output:

回答1:

I used flex to solve this by changing the row direction.

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;
}

Output:

JSFiddle: here