columns.html

<div
  style="border: 2px solid black;"
  class="l-container {{ className }} container-demo l-row t-align-center"
>
  <div
    class="l-col-4-from-bp-m l-col-6-from-bp-l"
    style="background: lightgray; line-height: 5;"
  >
    <strong>l-col</strong>
  </div>

  <div
    class="l-col-2-from-bp-m l-col-6-from-bp-l l-row"
    style="background: gray; line-height: 5;"
  >
    <div
      class="l-col-3-from-bp-l"
      style="background-color: rgba(255, 255, 255, 0.5); "
    >
      <strong>3</strong>
    </div>
    <div
      class="l-col-2-from-bp-l"
      style="background-color: rgba(255, 255, 255, 0.3); "
    >
      <strong>2</strong>
    </div>
    <div
      class="l-col-1-from-bp-l"
      style="background-color: rgba(255, 255, 255, 0.1); "
    >
      <strong>1</strong>
    </div>
  </div>
</div>