<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.css">
    <title>Document</title>
</head>
<body>
    <main class="container-lg">
        <h2>Opgave A</h2>
        <section class="my-4 row">
            <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
        </section>
        <h2>Opgave B</h2>
        <section class="my-4 row">
            <div class="bg-success opacity-50 border border-success-subtle p-5 col-6"></div>
            <div class="bg-success opacity-50 border border-success-subtle p-5 col-4"></div>
            <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
        </section>
        <h2>Opgave C</h2>
        <section class="my-4 row flex-md-row flex-column">
            <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
        </section>
        <h2>Opgave D</h2>
        <section class="my-4">
            <article class="row my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            </article>
            <article class="row my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            </article>            
        </section>
        <h2>Opgave E</h2>
        <section class="my-4">
            <article class="row my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            </article>
            <article class="row row-cols-md-3 justify-content-md-end my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col "></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            </article>            
        </section>
        <h2>Opgave F</h2>
        <section class="my-4">
            <article class="row my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col col-lg-8"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            </article>
            <article class="row row-cols-1 row-cols-sm-2 row-cols-md-4 my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            </article>    
            <article class="row row-cols-1 row-cols-md-2 row-cols-lg-4 my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            </article>      
            <article class="row row-cols-1 row-cols-sm-2 row-cols-md-4 my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
            </article>     
            <article class="row my-2">
                <div class="bg-success opacity-50 border border-success-subtle p-5 col col-lg-5"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col"></div>
                <div class="bg-success opacity-50 border border-success-subtle p-5 col col-lg-5"></div>
            </article>         
        </section>
    </main>
</body>
</html>