Wie kann ich die Ausrichtung einer Gradientenlinie in HTML zwischen verschiedenen Bildschirmgrößen ändern

Question

Mein Problem ist, dass ich einige vertikale Verlaufslinien zwischen Divs in HTML erstellt habe. Ich deaktiviere sie, wenn ich mit @media-Abfragen zur mobilen Ansicht wechsele. Was ich tun möchte, ist, die Ausrichtung dieser Zeilen in horizontale zu ändern, wenn Sie zu Mobile-View wechseln. Ich benutze Bootstrap-Klassen und muss den Mobile-First-Ansatz berücksichtigen.

Fazit:
NICHT auf Handy-Ansicht -> Vertikale Linien
Wenn auf mobile Ansicht -> Horizontale Linien

Hier mein HTML ist:

<section class="container"> 
    <div class="row"> 
     <div class="col-xs-12 col-md-4 VerticalAfter"> 
       SOME TEXT 
     </div> 

     <div class="col-xs-12 col-md-4"> 
       SOME TEXT 
     </div> 

     <div class="col-xs-12 col-md-4 VerticalBefore"> 
       SOME TEXT 
     </div> 
    </div> 
</section> 

CSS:

@media screen and (min-width: 768px) { 
    .VerticalAfter:after { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 1px; 
    height: 100%; 
    background: -webkit-gradient(linear, left top, left bottom, 
     color-stop(0%,rgba(208,228,247,0)), 
     color-stop(24%,rgba(115,177,231,0.48)), 
     color-stop(50%,rgba(12,16,255,1)), 
     color-stop(79%,rgba(83,159,225,0.42)), 
     color-stop(100%,rgba(135,188,234,0)) 
    ); 
    right: 0; 
    } 

    .VerticalBefore:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    width: 1px; 
    height: 100%; 
    background: -webkit-gradient(linear, left top, left bottom, 
     color-stop(0%,rgba(208,228,247,0)), 
     color-stop(24%,rgba(115,177,231,0.48)), 
     color-stop(50%,rgba(12,16,255,1)), 
     color-stop(79%,rgba(83,159,225,0.42)), 
     color-stop(100%,rgba(135,188,234,0)) 
    ); 
    left: 0; 
    } 
} 

Answer 1

Die von Ihnen verwendete lineare Gradientensyntax stammt aus einer alten Webkit-Implementierung und sollte definitiv NICHT mehr verwendet werden!

Sie können einfach

background-image: linear-gradient(to right, rgba(208,228,247,0) 0%, rgba(115,177,231,0.48) 24%, rgba(12,16,255,1) 50%, rgba(83,159,225,0.42) 79% rgba(135,188,234,0) 100%); 

verwenden und diese durch den Ersatz ro right mit to bottom auf die Desktop-Ansicht anpassen:

@media screen and (min-width: 768px) { 
    background-image: linear-gradient(to right, rgba(208,228,247,0) 0%, rgba(115,177,231,0.48) 24%, rgba(12,16,255,1) 50%, rgba(83,159,225,0.42) 79% rgba(135,188,234,0) 100%); 
} 

bearbeiten: Wie linearen Gradienten() verwenden: https://developer.mozilla.org/de/docs/Web/CSS/linear-gradient