title: Clean CSS: Use divs in gridsystem for desktop, outside of gridsystem for mobile
body: <p>I am trying to make a line under my heading that is 4 different colors.</p>
  
  <p>For desktop I want it to go with my responsive grid: <a href="https://i.stack.imgur.com/HW6vs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/HW6vs.png" alt="like this"></a> 
  For mobile I want it to go full-width: <a href="https://i.stack.imgur.com/0QslQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0QslQ.png" alt="like this"></a></p>
  
  <pre><code>&lt;header&gt;
  &lt;div class="container"&gt;
      &lt;div class=" row"&gt;
          &lt;div class="col-3 center"&gt;
              &lt;img src="assets/arteveldelogo.png"&gt;
          &lt;/div&gt;
          &lt;div class="col-9 hidden-sm right"&gt;
              &lt;h1 class="font-heavy"&gt;
                  Beeldbank Mediatheek Mariakerke
              &lt;/h1&gt;
              &lt;ul class="font-heavy"&gt;
                  &lt;li&gt;&lt;a href="#"&gt; Home &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt; Collecties &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt; Tentoonstellingen &lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt; Klassen &lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
          &lt;div class="line orangeline"&gt;&lt;/div&gt;
          &lt;div class="line blueline"&gt;&lt;/div&gt;
          &lt;div class="line magentaline"&gt;&lt;/div&gt;
          &lt;div class="line greenline"&gt;&lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>So my lines ar outside my gridsystem right now, and working fine for my mobile design, just not the way I want them for my desktop. When I put the lines inside a .row that's in a .container, they work for desktopdesign, not for mobile design. 
  My Sass is </p>
  
  <pre><code>.line{
   margin-top: 1rem;
   display:block;
   float:left;
   width: 25%;
   }
  .orangeline{
   border-bottom: 1px solid $orange;
   @media only screen and (min-width:45em){
    border-bottom: 4px solid $orange;
  }
  </code></pre>
  
  <p>(blueline, magentaline &amp; greenline are all the same, but with there own colorvariable)</p>
  
  <p>Is there a clean way to do is (using only css and html)? 
  Thanks!</p>