Align text to flex-start or flex-end for timeline

ungleich_page/static/ungleich_page/css/ungleich.css

@@ -125,4 +125,38 @@
 
 .header_slider > .carousel .item {
     padding-top: 150px;
-}
+}
+
+
+.timeline>li .timeline-panel {
+    display: flex;
+    min-height: 80px;
+    align-items: center;
+    padding-bottom: 15px;
+}
+
+.flex-justify-content-end{
+    justify-content: flex-end;
+}
+
+.flex-justify-content-start{
+    justify-content: flex-start;
+}
+
+.timeline>li.timeline-inverted>.timeline-panel {
+    padding-bottom: 0;
+}
+
+
+@media (min-width: 768px) and (max-width: 991px) {
+    .timeline>li .timeline-panel {
+        min-height: 100px;
+    }
+}
+
+@media (min-width: 992px) {
+    .timeline>li .timeline-panel {
+        min-height: 170px;
+    }
+}
+

ungleich_page/templates/ungleich_page/glasfaser/_about_item.html

@@ -4,7 +4,7 @@
       <img class="img-circle img-responsive" src="{{ instance.image.url }}" alt="">
     </div>
     {% if instance.link_url %}</a>{% endif %}
-    <div class="timeline-panel wow {% if instance.inverted %}slideInRight{% else %}slideInLeft{% endif %}">
+    <div class="timeline-panel wow {% if instance.inverted %}slideInRight flex-justify-content-start {% else %}slideInLeft flex-justify-content-end{% endif %}">
       <div class="timeline-body">
         <p>{{ instance.title }}</p>
       </div>