<style>
  * {
    box-sizing: border-box;
  }
  body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  article {
    width: 76%;
    height: 500px;
  }
  section {
    background-color: lightgray;
    outline: 3px dotted tomato;
    padding: 2rem;
  }
  wc-responsive-container {
    min-height: 100%;
    display: grid;
    grid-gap: 2rem;
    padding: 2rem;
    outline: 3px dotted skyblue;
  }
  wc-responsive-container.md {
    grid-template-columns: repeat(3, 1fr);
  }
  wc-responsive-container.md > [md-colspan="2"] {
    grid-column: span 2;
  }
  wc-responsive-container.md > [md-colspan="3"] {
    grid-column: span 3;
  }
</style>
<script type="module">
  // Using @web/dev-server or your favorite bundler...
  import 'wc-responsive-container';
</script>
<article>
  <wc-responsive-container breaks='{"sm": 300, "md": 500, "lg": 700, "xl": 900}'>
    <section md-colspan="1">
      1
    </section>
    <section md-colspan="2">
      2
    </section>
    <section md-colspan="3">
      3
    </section>
  </wc-responsive-container>
</article>