Изменить расположение блоков в адаптивной секции

Рейтинг: 0Ответов: 0Опубликовано: 12.07.2023

Необходимо сверстать адаптивную секцию на флексах. Секция состоит из заголовка h2 , блока с копирайтом div class=copy, и блока с основным контентом div class=content. При разрешении 1024 заголовок шириной 255px находится в левой части секции, а под ним так же в левой части div class=copy шириной 255px, а всю правую часть секции занимает div class="content" шириной 540px. При разрешении 768px все три блока занимают 100% ширины секции и выстраиваются вертикально, причем div class=copy находится внизу секции.

.container  {
    max-width: 1110px;
    margin-right: auto;
    margin-left: auto;
  }
  .wrapper  {
    display: flex;
  }
  .title    {
    width: 255px ;
  }

  .copy {
    width: 255px ;
  }
  .content  {
    max-width: 540px;
  }
<section>
        <div class="container">
            <div class="wrapper">
                <h2 class="title">
                    Title 
                </h2>
                <div class="copy">
                    <button class="button">
                        Send
                    </button>
                    <p class="copy__text">
                        &copy; 2023
                    </p>
                </div>
                <div class="content">
                    <p class="content__text">
                        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Reprehenderit voluptates magnam nobis eaque, cum animi cumque. Vitae reprehenderit, at beatae blanditiis consequatur dolore dicta sapiente harum modi quibusdam id assumenda quis quidem repudiandae dolor optio magni libero tempora sint. Eligendi sit velit ab, nulla vitae voluptatibus vel adipisci ut fuga vero obcaecati. Sit, adipisci pariatur corrupti delectus est repudiandae saepe architecto ducimus ea quis, consequatur possimus inventore ipsa itaque ipsam animi non odio tempora dolorem error velit fugit nam? Perferendis deleniti explicabo libero mollitia. Eius exercitationem iusto modi rerum adipisci! A omnis nesciunt molestiae impedit voluptate ratione, est, dolores possimus ad obcaecati, velit eligendi? Odio, cupiditate incidunt! Ab iste deserunt earum, quidem porro inventore sed fuga molestias impedit exercitationem minus saepe. Quas voluptas ea provident autem dolorum, incidunt, voluptate voluptatibus nostrum quidem sint hic excepturi illo veritatis enim commodi, veniam earum sapiente nobis quod perspiciatis aspernatur deserunt ad sit maiores. Molestias eius laudantium, maiores exercitationem tempore, ad corrupti minus similique porro tenetur doloremque iure. Sunt ad laborum velit dolorem accusantium tempore sequi quasi dignissimos laudantium odit! Ad voluptates beatae dignissimos tenetur cum sapiente quasi debitis nam aliquid aliquam architecto mollitia dicta aperiam fugiat ea odit ipsa laboriosam, aspernatur recusandae reprehenderit quia adipisci est? Sed deserunt dicta maiores natus distinctio dolorum sit ut. Suscipit officiis optio unde quidem, perferendis beatae vitae sapiente, autem quaerat et itaque velit accusamus sint nostrum repellendus ea inventore! Fuga odit beatae at fugiat nostrum magnam doloribus numquam cum autem sit quos, quaerat dolor fugit labore dolore praesentium? Eos magnam perferendis quas pariatur enim consectetur odio dolore reprehenderit ratione, perspiciatis sunt, nemo explicabo amet praesentium aliquam sequi provident modi aliquid nobis autem? Magni rerum aspernatur culpa atque incidunt quas expedita fugit quidem enim libero, nam debitis corrupti dolore magnam molestias quis accusantium? Omnis aspernatur voluptatibus culpa eaque.
                    </p>
                </div>
            </div>
        </div>
    </section>

Ответы

Ответов пока нет.