Как изменить display в div при radio: checked?

Question

[Boris]

Как изменить display в div при radio: checked?
https://jsfiddle.net/r0v7fkL6/16/

<div class="products">

  <div class="bar_radios">
    <input type="radio" name="bar" id="bar1">
    <input type="radio" name="bar" id="bar2">
  </div>

  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>
  <div class="prod"></div>

</div>

.prod {
  display: inline-block;
  width: 100px;
  height: 100px;
  background-color: #000;
  margin: 20px;
}

input#bar1:checked~.prod {
  display: block;
}

input#bar2:checked~.prod {
  display: inline-block;
}

Answer 1

[Aetae]

Никак.
Селекторы ~ и + работают только если элементы в одном родителе и идут по порядку.