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-12input:checked+label {
  color: red;
}

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

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

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

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

.col-md-12label {
  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;
}

<divclass="col-md-12"><inputtype="radio"name="slider"class="slide-radio1"id="slider_1"><labelfor="slider_1"class="page1">label 1</label><divclass="slider slide-1 inner-container">
    container 1
  </div><inputtype="radio"name="slider"class="slide-radio2"checkedid="slider_2"><labelfor="slider_2"class="page2">label 2</label><divclass="slider slide-2 inner-container">
    container 2
  </div><inputtype="radio"name="slider"class="slide-radio3"id="slider_3"><labelfor="slider_3"class="page3">label 3</label><divclass="slider slide-3 inner-container">
    container 3
  </div><!-----slider Navigator-----><divclass="navigator left"><iclass="fa fa-chevron-left"aria-hidden="true">nav left</i></div><divclass="navigator right"><iclass="fa fa-chevron-right"aria-hidden="true">nav right</i></div></div>