Layout responsivo

by brunomateus

HTML

<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

    <title>Layout Responsivo!</title>
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col bg-primary" id="header">
        <header>
          Mussum Ipsum, cacilds vidis litro abertis. Atirei o pau no gatis, per gatis num morreus. Viva Forevis aptent taciti sociosqu ad litora torquent. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo, vitae iaculis nisl. Manduma pindureta quium dia nois paga.
        </header>
      </div>
    </div>
    
    <div class="row">
      <div class="col-12 bg-secondary order-lg-last" id="content">
      Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. Suco de cevadiss deixa as pessoas mais interessantis. Não sou faixa preta cumpadi, sou preto inteiris, inteiris.
    </div>
    <div class="col-sm-12 col-md-6 col-lg-12 order-lg-4 bg-info" id="sign_up">
      Leite de capivaris, leite de mula manquis sem cabeça.
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 bg-warning order-1" id="feature_1">
      Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi.  Em pé sem cair, deitado sem dormir, sentado sem cochilar e fazendo pose. Per aumento de cachacis, eu reclamis.
    </div>
    <div class="col-sm-12 col-md-6 col-lg-4 bg-success order-2" id="feature_2">
      Suco de cevadiss, é um leite divinis, qui tem lupuliz, matis, aguis e fermentis. Interagi no mé, cursus quis, vehicula ac nisi.  Em pé sem...