Translating An Absolutely Positioned Div

I have this position in this ways, the problem is translating each divs based on what i have. the css is like: .col-md-12 { display: flex; flex-wrap: wrap; } .col-md-12

Solution 1:

May I suggest you do like this, where you use transform: translateX(-100%) to move all out of view and then move the checked one into view with transform: translateX(0);

.col-md-12 {
  display: flex;
  flex-wrap: wrap;
}

.col-md-12 input:checked+label {
  color: red;
}

.col-md-12 input:checked+label+div.slider {
  color: red;
}

.col-md-12 input+label+div.slider {
  transform: translateX(-100%);
}

.col-md-12 input:checked+label+div.slider {
  transform: translateX(0);
  transition: transform 1s;
}

.col-md-12 input {
  flex-basis: 3%;
  margin-right: 27%;
  order: 1;
}

.col-md-12 label {
  flex-basis: 30%;
  margin-top: 10px;
  order: 2;
}

.col-md-12 .navigator {
  flex-basis: 50%;
  margin-top: 10px;
  order: 3;
}

.col-md-12 .slider {
  flex-basis: 100%;
  margin-top: 10px;
  order: 4;
  background: lightgray;
  width: 80%;
  height: 250px;
  position: absolute;
  top: 70px;
}

<div class="col-md-12">
  <input type="radio" name="slider" class="slide-radio1" id="slider_1">
  <label for="slider_1" class="page1">label 1</label>
  <div class="slider slide-1 inner-container">
    container 1
  </div>

  <input type="radio" name="slider" class="slide-radio2" checked id="slider_2">
  <label for="slider_2" class="page2">label 2</label>
  <div class="slider slide-2 inner-container">
    container 2
  </div>

  <input type="radio" name="slider" class="slide-radio3" id="slider_3">
  <label for="slider_3" class="page3">label 3</label>
  <div class="slider slide-3 inner-container">
    container 3
  </div>

  <!-----slider Navigator----->
  <div class="navigator left">
    <i class="fa fa-chevron-left" aria-hidden="true">nav left</i>
  </div>
  <div class="navigator right">
    <i class="fa fa-chevron-right" aria-hidden="true">nav right</i>
  </div>

</div>