好吧，我们试试这个

.lorem-list {
  counter-reset: counter;
  max-width: 600px;
  font-size: 16px;
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style: none;
}
.lorem-list * {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
.lorem-list *:after,
.lorem-list *:before {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}
.lorem-list-item {
  --circle-width: 20px;
  --circle-color: red;
  --padding: 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding: 0 0 var(--padding) var(--padding);
  gap: 20px;
  margin: 0;
}
@media (max-width: 599px) {
  .lorem-list-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: unset;
        -ms-flex-align: unset;
            align-items: unset;
  }
}
.lorem-list-item:before,
.lorem-list-item:after {
  content: '';
  position: absolute;
  background-color: var(--circle-color);
}
.lorem-list-item:before {
  width: var(--circle-width);
  height: var(--circle-width);
  left: 0;
  top: 0;
  border-radius: 50%;
}
.lorem-list-item:after {
  left: calc(var(--circle-width) / 2);
  top: calc(var(--circle-width) / 2);
  bottom: calc(var(--circle-width) / -2);
  width: 2px;
  margin-left: -1px;
}
.lorem-list-item:last-child {
  padding-bottom: 0;
}
.lorem-list-item:last-child:after {
  bottom: 0;
}
.lorem-list-item-title {
  grid-column: span 2;
  font-weight: 700;
  text-transform: uppercase;
}
.lorem-list-item-title:before {
  content: counters(counter, '.', decimal-leading-zero) ' ';
  counter-increment: counter;
}
@media (max-width: 599px) {
  .lorem-list-item-desc {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
}
.lorem-list-item-img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  aspect-ratio: 16/9;
  background-color: #eee;
}
.lorem-list-item-img img {
  display: block;
  max-width: 100%;
}

<ul class="lorem-list">
  <li class="lorem-list-item">
    <div class="lorem-list-item-title">Lorem ipsum.</div>
    <div class="lorem-list-item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, consectetur impedit aspernatur esse labore quidem tempora sapiente animi corrupti doloribus sit quibusdam accusantium repellat id reiciendis blanditiis nulla! Aspernatur provident sunt tempora ad neque aperiam nobis deleniti officiis nulla totam!</div>
    <div class="lorem-list-item-img-wrapp">
      <div class="lorem-list-item-img">Image</div>
    </div>
  </li>
  <li class="lorem-list-item">
    <div class="lorem-list-item-title">Lorem ipsum.</div>
    <div class="lorem-list-item-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate, consectetur impedit aspernatur esse labore quidem tempora sapiente animi corrupti doloribus sit quibusdam accusantium repellat id reiciendis blanditiis nulla! Aspernatur provident sunt tempora ad neque aperiam nobis deleniti officiis nulla totam!</div>
    <div class="lorem-list-item-img-wrapp">
      <div class="lorem-list-item-img">Image</div>
    </div>
  </li>
</ul>