Cacher is the code snippet organizer for pro developers

 <!-- RESPONSIVE GRID -->
    <!-- Gridi rakendamiseks peavad olema elemendid reas, grid on 12 tulba laiune, seega peab elemendid ära jagama nende vahel -->
    <div class="row">
        <!-- väiksel ekraanil võtab 6 tulba laiune, keskmisel 8 tulba laiune -->
      <div class="col-sm-6 col-md-8 col-lg-9" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>8 column on medium screen</li>
          <li>9 column on large screen</li>
          <li>10 column on xlarge screen</li>
        </ul>
      </div>
      <div class="col-sm-6 col-md-4 col-lg-3" style="border:1px solid #333">
        <ul>
          <li>6 column on small screens</li>
          <li>4 column on medium screen</li>
          <li>3 column on large screen</li>
          <li>2 column on xlarge screen</li>
        </ul>
      </div>
    </div>

    <!-- EQUAL WIDTH -->
    <!-- Teatud juhtudel tahame, et elemendid oleks võrdsed praktiliselt kõigil ekraani suurustel -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
      <div class="col" style="border:1px solid #333">Equal Width</div>
    </div>

    <!-- EQUAL WIDTH MULTI ROW -->
    <div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333"></div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
      <div class="col" style="border:1px solid #333">Equal Width Multi</div>
    </div>

    <!-- AUTO LAYOUT -->
    <div class="row">
      <div class="col" style="border:1px solid #333">Auto Layout</div>
      <div class="col-6" style="border:1px solid #333">Auto Layout</div>
      <div class="col-4" style="border:1px solid #333">Auto Layout</div>
    </div>

    <!-- EQUAL WIDTH STACKED -->
    <div class="row">
        <!-- Kui tahan, et elemendid oleks üksteise all väiksel ekraanil -->
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
      <div class="col-sm" style="border:1px solid #333">Equal Width Stack</div>
    </div>

    <!-- ORDERING -->
    <!-- saab muuta elementide järjekorda reas -->
    <div class="row">
      <div class="col order-3" style="border:1px solid #333">
        First
      </div>
      <div class="col order-1" style="border:1px solid #333">
        Second
      </div>
      <div class="col order-2" style="border:1px solid #333">
        Third
      </div>
    </div>

    <!-- OFFSETTING -->
    <!-- me saame elemente ühes reas nihutada teatud tulpade arvu võrra -->
    <div class="row">
      <!-- 6 column div offset by 3 -->
      <div class="col-lg-6 offset-lg-3" style="border:1px solid #333">.col-md-6 .offset-md-3</div>
    </div>
    <div class="row">
      <!-- 2 4 column divs, the second offset by 4 -->
      <div class="col-md-4" style="border:1px solid #333">.col-md-4</div>
      <div class="col-md-4 offset-md-4" style="border:1px solid #333">.col-md-4 .offset-md-4</div>
    </div>

    <div class="row">
      <!-- 2 3 column divs, both offset by 3 -->
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
      <div class="col-md-3 offset-md-3" style="border:1px solid #333">.col-md-3 .offset-md-3</div>
    </div>

    <!-- NESTING -->
    saame tulpadeks jagada ka teiste elementide sees
    <div class="row">
      <div class="col-sm-9" style="border:1px solid blue">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-md 8" style="border:1px solid red">
            Level 2: .col-8 .col-sm-6
          </div>
          <div class="col-md 4" style="border:1px solid red">
            Level 2: .col-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>