.number { width: 50px; height: 50px; position: relative; text-align: center; display: inline-block; font-size: 36px; background-color: #9aacb7; color: #fff; line-height: 50px; } .timeline .row { position: relative; z-index: 5; } /* Para filas impares (1, 3, 5...) */ .timeline .col-6.col-md-4.text-md-start.text-center { margin-top: 1em; } /* Para filas pares (2, 4, 6...) */ .timeline .row:nth-child(even) .col-lg-1 { order: 0; } .timeline .row:nth-child(even) .col-6.col-md-4.text-md-end.text-center { order: 1; margin-top: 1em; } .timeline .row .col-12.col-md-4.mt-4.mt-md-0 { order: 3; } @media (min-width: 768px) { .timeline::before { content: ""; position: absolute; width: 1px; background-color: #9aacb7; top: 5%; bottom: 0; left: 50%; margin-left: -2px; height: 91%; z-index: 1; } .number::before { content: ""; position: absolute; height: 1px; background-color: #9aacb7; width: 400%; top: 50%; left: -150%; z-index: -1; display: inline-block; } .timeline .row:nth-child(even) .col-lg-1, .timeline .row .col-12.col-md-4.mt-4.mt-md-0, .timeline .row:nth-child(even) .col-6.col-md-4.text-md-end.text-center { order: inherit; } }