Левая колонка на временной шкале не отображается

Question

Итак, на последних нескольких форумах мне удалось прояснить пару моментов, касающихся исправления моей гибкой шкалы времени.Я скопировал это из codepen.io, потому что мне лень создавать его самостоятельно, и второй факт заключается в том, что создать его может быть сложно.

Моя проблема сейчас - Почему моя временная шкала в левой колонкене отображается при уменьшении размера браузера до размера планшета / мобильного телефона? При изменении размера браузера отображается только правая колонка.

Пожалуйста, запустите фрагмент кода и просмотрите его.на полную страницу и измените размер браузера.Вы поймете, что я имею в виду.

/* ==================== Timeline ==================== */

.container {
  width: 80%;
  padding: 50px 0;
  margin: 50px auto;
  position: relative;
  overflow: hidden;
  font-family: sans-serif;
}

.container:before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -1px;
  width: 2px;
  height: 100%;
  background: #CCD1D9;
  z-index: 1;
}

.timeline-block {
  width: -webkit-calc(50% + 8px);
  width: -moz-calc(50% + 8px);
  width: calc(50% + 8px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: flex;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  justify-content: space-between;
  clear: both;
}

.timeline-block-right {
  float: right;
}

.timeline-block-left {
  float: left;
  display: flex;
  flex-direction: row-reverse;
}

.marker {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid #F5F7FA;
  background: #4FC1E9;
  margin-top: 10px;
  z-index: 9999;
}

.timeline-content {
  width: 95%;
  padding: 0 15px;
  color: #666;
}

.timeline-content h3 {
  margin-top: 5px;
  margin-bottom: 5px;
  font-size: 25px;
  font-weight: 500;
}

.timeline-content span {
  font-size: 15px;
  color: #a4a4a4;
}

.timeline-content p {
  font-size: 14px;
  line-height: 1.5em;
  word-spacing: 1px;
  color: #888;
}


/* ==================== Timeline Media Queries ==================== */

@media screen and (max-width: 800px) {
  .container:before {
    left: 8px;
    width: 2px;
  }
  .timeline-block {
    width: 100%;
    margin-bottom: 30px;
  }
  .timeline-block-right {
    float: none;
  }
  .timeline-block-left {
    float: none;
    text-align: left;
    display: none;
    flex-direction: none;
  }
}

<div class="container">

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Main Title</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>

  <div class="timeline-block timeline-block-left">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Main Title Number 2</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Main Title Number 3</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>

  <div class="timeline-block timeline-block-left">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Main Title Number 4</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>

  <div class="timeline-block timeline-block-right">
    <div class="marker"></div>
    <div class="timeline-content">
      <h3>Main Title Number 5</h3>
      <span>Year - year</span>
      <p>
        <span style="font-size: 16px; color: #666666;">Company name</span>
        <br> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen
        book.
      </p>
    </div>
  </div>

</div>
<!-- End of container div for the responsive timelime -->

Answer 1

В медиа-запросах установлено значение display: none; в левом столбце.

@media screen and (max-width: 800px) {
  .timeline-block-left {
      float: none;
      text-align: left;
      display: none; /* << remove this line */
      flex-direction: none;
  }
}

Для маркера существует flex-direction: row-reverse;, который изменяет направление блока:

.timeline-block-left {
    /*...*/
    flex-direction: row-reverse;
}