Hide label in certain resolution with simple_form

Question

I have this wrapper in simple_forms

config.wrappers :styled_horizontal_boolean3, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly
  b.use :label, class: 'hidden-sm hidden-xs col-md-3 control-label'

  b.wrapper tag: 'div', class: 'col-md-9 checkbox-margin' do |wr|
    wr.wrapper tag: 'div', class: 'styled checkbox' do |ba|
      ba.use :label_span_input, class: 'col-md-9', span_class: 'left'
    end

    wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    wr.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end
end

This will hide the control-label at lower resolutions, which is great, see screenshot:

But I need to find a way to hide the label of the checkbox at larger resolutions, otherwise it's rendered twice, see screenshot:

Edit: This is the HTML generated by simple_form

<label class="boolean optional checkbox" for="timesheet_report_uninvoiced">
  <input class="boolean optional col-md-9" id="timesheet_report_uninvoiced" name="timesheet_report[uninvoiced]" type="checkbox" value="1">
  <span class="left">    </span>Uninvoiced only
</label>

Answer 1

I was able to accomplish it like this:

config.wrappers :styled_horizontal_boolean3, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :html5
  b.optional :readonly
  b.use :label, class: 'hidden-sm hidden-xs col-md-3 control-label'

  b.wrapper tag: 'div', class: 'col-md-9 checkbox-margin hide-text-medium-large' do |wr|
    wr.wrapper tag: 'div', class: 'styled checkbox' do |ba|
      ba.use :label_span_input, class: 'col-md-9', span_class: 'left'
    end

    wr.use :error, wrap_with: { tag: 'span', class: 'help-block' }
    wr.use :hint,  wrap_with: { tag: 'span', class: 'help-block' }
  end
end

And added this to the CSS:

@media (min-width: 992px)
  .hide-text-medium-large
    color: transparent
    -webkit-touch-callout: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
    -ms-user-select: none
    user-select: none

This will make only the text transparent, the checkbox stays as is, and users can't see or select the hidden text. As soon as the resolution is lower than 992 it's being displayed. Works perfectly!

Answer 2

Take a look at the responsive utility classes of Bootstrap. You might add for example add the hidden-md and hidden-lg classes to hide it on medium and large screens