How to center custom checkbox label under checkbox - CSS?

I'm working on modifying an existing project which has some custom CSS styling for checkboxes. Currently the checkbox label is sitting to the right of the checkbox and I would like to move the checkbox to sit above the label. How can I achieve this using the following code?

<input type="checkbox" id="box-<%= tmp %>">
<label for="box-<%= tmp %>"><%= question.choiceAnswer[tmp] %></label>

input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  text-align: center;
  font-weight: 500;
  font-size: 0.85em;
  color: #232A33;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid #232A33;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

From my understanding, the typical checkbox is no hidden and new checkbox is added through CSS, but I'm not sure how to move the label to be below the checkbox since the seem to be a single piece. Can I achieve this by modifying the above code or am I better off starting from scratch?

Thanks in advance!