AppComponentsLibrary.svelte

<script>
  import Container from './Container.svelte'
</script>

<h1>App Name</h1>

<Container>
  <div class:col-xs-3 class:col-md-2 class:col-lg-1>...</div>
  <div class:col-xs-3 class:col-md-2 class:col-lg-1 class:hidden class:visible-md>...</div>
  <div class:col-xs-3 class:col-md-2 class:col-lg-1>...</div>
</Container>

Container.svelte

<script>
    import { onMount, onDestroy } from 'svelte'

    let debounceInMillis    = 100
    let debounceImmediately = true

    export const gridXS = 'grid-xs'
    export const gridSM = 'grid-sm'
    export const gridMD = 'grid-md'
    export const gridLG = 'grid-lg'
    export const gridXL = 'grid-xl'

    export let sizeXS = 480
    export let sizeSM = 768
    export let sizeMD = 1024
    export let sizeLG = 1440
    export let sizeXL = 1980

    let isXS = false
    let isSM = false
    let isMD = false
    let isLG = false
    let isXL = false

    let container

    onMount(() => {
        resizeObserver.observe(container)
        measureBox(container)
    })


    onDestroy(() => {
        resizeObserver.unobserve(container)
    })


    /**
     * Debounces a given callback by time in milliseconds
     * @sauce: https://davidwalsh.name/javascript-debounce-function
     * @sauce: http://underscorejs.org/#debounce
     * @param  {function}   cb          Callback to be fired once the debounce has lapsed
     * @param  {number}     wait        Debounce delay in milliseconds
     * @param  {boolean}    immediate   Whether to trigger the callback before or after the delay
     * @return {null}
     */
    const debounce = (cb, wait, immediate) => {
        var timeout
        return function() {
            var context = this, args = arguments
            var later = function() {
                timeout = null
                if (!immediate) cb.apply(context, args)
            }
            var callNow = immediate && !timeout
            clearTimeout(timeout)
            timeout = setTimeout(later, wait)
            if (callNow) cb.apply(context, args)
        }
    }


    const resizeObserver = new ResizeObserver(debounce((entries) => {
        measureBox(container)

        // for (let entry of entries) {
        //     if (entry.contentBoxSize) {
        //         ...
        //     } else {
        //         ...
        //     }
        // }
    }), debounceInMillis, debounceImmediately)


    const measureBox = (el) => {
        let width = el.clientWidth
        isXS =      0 < width && width <= sizeXS 
        isSM = sizeXS < width && width <= sizeSM 
        isMD = sizeSM < width && width <= sizeMD 
        isLG = sizeMD < width && width <= sizeLG 
        isXL = sizeLG < width && width <= sizeXL 
    }

</script>

<style>
    :global(.hidden) { display: none }
    :global(.grid-xs) > .hidden-xs { display: none }
    :global(.grid-xs) > .visible-xs { display: block }
</style>

<div bind:this={container}
    class:grid-xs={isXS}
    class:grid-sm={isSM}
    class:grid-md={isMD}
    class:grid-lg={isLG}
    class:grid-xl={isXL}
>
    <slot></slot>
</div>

Link.svelte

<script>
    import { onMount } from 'svelte'

    // @params: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
    export let anchor       = null
    export let classList    = null
    export let href         = null
    export let hreflang     = null
    export let id           = null
    export let ping         = null
    export let rel          = null
    export let target       = null
    export let type         = null

    onMount(() => {

        // patch insecure target="_blank" attributes
        if (target) {
            rel = (rel += ' noopener noreferrer').trim()
        }

        if (anchor) {
            id = anchor.trim()
        }
    })
</script>

<a  class={classList}
    {hreflang}
    {href}
    {id}
    {ping}
    {rel}
    {target}
    {type}
><slot></slot></a>