title: Bootstrap 3 timeline responsive
body: <p>So i found this timeline for Bootstrap 3 : 
  <a href="http://codepen.io/betdream/details/Ifvbi" rel="nofollow">here's the original timeline</a></p>
  
  <p>but i wanted to change it more to look like this : </p>
  
  <p><a href="http://jsfiddle.net/lenchenx3/n4Wkn/" rel="nofollow">here's my jsfiddle</a></p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="page-header"&gt;
      &lt;h1 id="timeline"&gt;Aktuelles&lt;/h1&gt;
  &lt;/div&gt;
  &lt;ul class="timeline"&gt;
      &lt;li&gt;
          &lt;div class="timeline-badge"&gt;&lt;/div&gt;
          &lt;div class="timeline-panelimg"&gt;
              &lt;img src="images/Icons_Blog/rosetta.png"&gt;
          &lt;/div&gt;
          &lt;div class="timeline-panel"&gt;
              &lt;div class="timeline-heading"&gt;
                  &lt;h4 class="timeline-title"&gt;Die Reise des Satelliten Rosetta&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="timeline-body"&gt;
                  &lt;p&gt;Die Geschichte des Satelliten „Rosetta" und dem Lander „Philae" hat etwas von einem Märchen. Die Beiden
                      begaben sich vor langer Zeit auf eine Reise zum weit entfernten Kometen „67P/Tschurjumow-Gerassimenko"
                      um aller Welt zu zeigen, wie die Urmaterie des Sonnensystems aussieht. Bevor sie den Kometen allerdings
                      erreichen konnten, verfallen sie in einen tiefen SChlaf. Aber alles ist gut, denn der Satellit konnte rechtzeitig
                      aus dem Dornröschenschlaf aufwachen, um sich auf seine noch bevorstehende Aufgabe vorzubereiten.
                      Design &amp; Data hat einen charmanten Zeichentrickfilm für die ESA produziert, der die bisherige Reise von Rosetta
                      und ihrem Begleiter Philae zusammenfasst.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;ul class="aktuelltag"&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; Rosetta&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; Rosetta&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; Rosetta&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; Rosetta&lt;/li&gt;
                      &lt;ul class="aktuelltagweiter"&gt;
                          &lt;li class="aktuelllistweiter"&gt;&lt;a href="#"&gt;&lt;img src="images/Icons_Blog/arrow_right.png"&gt; Weiterlesen&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="timeline-badge"&gt;&lt;/div&gt;
          &lt;div class="timeline-panelimg"&gt;
              &lt;img src="images/Icons_Blog/showreel.png"&gt;
          &lt;/div&gt;
          &lt;div class="timeline-panel"&gt;
              &lt;div class="timeline-heading"&gt;
                  &lt;h4 class="timeline-title"&gt;Showreel 2014&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="timeline-body"&gt;
                  &lt;p&gt;Wie die Zeit vergeht - genau drei Jahre gibt es Design &amp; Data jetzt schon. Wir haben anlässlich unseres dreijährigen
                      Jubiläums ein Showreel erstellt, das die schönsten und interessantesten Projekte noch einmal präsentieren soll.
                      Das Showreel umfasst die vielfältigen Seiten unserer Arbeit - von Drehs in der Wüste über Animationen und Motiondesign
                      bis hin zum neu produzierten ESA Zeichentrickfilm.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;ul class="aktuelltag"&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; Showreel&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; Showreel&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; Showreel&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; Showreel&lt;/li&gt;
                      &lt;ul class="aktuelltagweiter"&gt;
                          &lt;li class="aktuelllistweiter"&gt;&lt;a href="#"&gt;&lt;img src="images/Icons_Blog/arrow_right.png"&gt; Weiterlesen&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="timeline-badge"&gt;&lt;/div&gt;
          &lt;div class="timeline-panelimg"&gt;
              &lt;img src="images/Icons_Blog/dlr.png"&gt;
          &lt;/div&gt;
          &lt;div class="timeline-panel"&gt;
              &lt;div class="timeline-heading"&gt;
                  &lt;h4 class="timeline-title"&gt;DLR-DVD „Mars - Ein Planet voller Rätsel"&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="timeline-body"&gt;
                  &lt;p&gt;Das Deutsche Zentrum für Luft- und Raumfahrt (DLR) beschäftigt sich unter Anderem mit der Erforschung des
                      Mars. Das DLR ist an der ESA Mission „Mars Express" mit einer hochauflösenden 3D Kamera beteiligt und liefert
                      mit ihr ständig neue Daten zur Beschaffenheit des Roten Planeten. Wir haben eine DVD für das DLR produziert,
                      in der dessen Experten einen Überblick über den aktuellen Stand der Marsforschung in zweisprachigen Interviews
                      liefern. Die DVD trägt den Titel „Mars - Ein Planet voller Rätsel".&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;ul class="aktuelltag"&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; DLR DVD&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; DLR DVD&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; DLR DVD&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; DLR DVD&lt;/li&gt;
                      &lt;ul class="aktuelltagweiter"&gt;
                          &lt;li class="aktuelllistweiter"&gt;&lt;a href="#"&gt;&lt;img src="images/Icons_Blog/arrow_right.png"&gt; Weiterlesen&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      &lt;li&gt;
          &lt;div class="timeline-badge"&gt;&lt;/div&gt;
          &lt;div class="timeline-panelimg"&gt;
              &lt;img src="images/Icons_Blog/ecmwf.png"&gt;
          &lt;/div&gt;
          &lt;div class="timeline-panel"&gt;
              &lt;div class="timeline-heading"&gt;
                  &lt;h4 class="timeline-title"&gt;Weltmarktführer ECMWF&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="timeline-body"&gt;
                  &lt;p&gt;Die Wetterkarte ist für uns alle etwas Alltägliches. Die Wissenschaft, die die Wettervorhersage möglich macht,
                      ist aber alles andere als alltäglich. Sie erfordert den talentierten Verstand von vielen fähigen Wissenschaftlern -
                      wie die des ECMWF. Das European Centre for Medium-Range Weather Forecasts (ECMWF) ist Weltmarktführer in
                      numerischer Wettervorhersage. Sie forschen nach immer besseren Möglichkeiten das Wetter vorherzusehen.
                      Wir stellen die Wetterexperten in unserem neuen Video vor.&lt;/p&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;ul class="aktuelltag"&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; ECMWF&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; ECMWF&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; ECMWF&lt;/li&gt;
                      &lt;li class="aktuelllist"&gt;&lt;img src="images/Icons_Blog/tag.png"&gt; ECMWF&lt;/li&gt;
                      &lt;ul class="aktuelltagweiter"&gt;
                          &lt;li class="aktuelllistweiter"&gt;&lt;a href="#"&gt;&lt;img src="images/Icons_Blog/arrow_right.png"&gt; Weiterlesen&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>I got it done (well here are some minor mistakes).</p>
  
  <p>But it's not responsive. i guess i kicked smth essentiell for this or didn't do the order right. Anyone can tell me what i did wrong? 'cause i defenitely did smth wrong! help pls </p>