Представь что ты супер куртой верстальшик сайтов вот тебе задание сделай его 
Створити декілька блоків на сайті.
Зробіть 3 ряди: в першому повинно знаходитися 2 блоки, у другому - 4, а в
третьому - один блок, який займає половину екрану, і ще 4 блоки на
половину, що залишилася.
Всі блоки повинні трансформуватися в залежності від розміру екрана.
При зменшенні до:
-md- в першому ряду - 2 блоки по 5 колонок,
-sm- в другому ряду - зникають парні блоки,
-xs- в третьому ряду - замість 1-го блоку з'являється порожній простір.
Для виконання даного завдання нам знадобиться використовувати фреймворк Bootstrap. Детальний код буде виглядати так:\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\">\n    <title>Responsive Layout</title>\n</head>\n<body>\n    <div class=\"container-fluid\">\n        <h2>Ряд 1</h2>\n        <div class=\"row\">\n            <div class=\"col-lg-6 col-md-5 col-xs-12\" style=\"background-color: lightblue; min-height: 100px;\"></div>\n            <div class=\"col-lg-6 col-md-5 col-md-offset-2 col-xs-12\" style=\"background-color: lightblue; min-height: 100px;\"></div>\n        </div>\n\n        <h2>Ряд 2</h2>\n        <div class=\"row\">\n            <div class=\"col-lg-3 col-md-6 col-sm-6\" style=\"background-color: lightgreen; min-height: 100px;\"></div>\n            <div class=\"col-lg-3 col-md-6 col-sm-6 hidden-sm\" style=\"background-color: lightgreen; min-height: 100px;\"></div>\n            <div class=\"col-lg-3 col-md-6 col-sm-6\" style=\"background-color: lightgreen; min-height: 100px;\"></div>\n            <div class=\"col-lg-3 col-md-6 col-sm-6 hidden-sm\" style=\"background-color: lightgreen; min-height: 100px;\"></div>\n        </div>\n\n        <h2>Ряд 3</h2>\n        <div class=\"row\">\n            <div class=\"hidden-xs col-lg-6\" style=\"background-color: lightcoral; min-height: 100px;\"></div>\n            <div class=\"col-lg-6 col-md-12 col-sm-12 col-xs-12\">\n                <div class=\"row\">\n                    <div class=\"col-lg-3 col-md-6 col-sm-6 col-xs-6\" style=\"background-color: lightcoral; min-height: 100px;\"></div>\n                    <div class=\"col-lg-3 col-md-6 col-sm-6 col-xs-6\" style=\"background-color: lightcoral; min-height: 100px;\"></div>\n                    <div class=\"col-lg-3 col-md-6 col-sm-6 col-xs-6\" style=\"background-color: lightcoral; min-height: 100px;\"></div>\n                    <div class=\"col-lg-3 col-md-6 col-sm-6 col-xs-6\" style=\"background-color: lightcoral; min-height: 100px;\"></div>\n                </div>\n            </div>\n        </div>\n    </div>\n\n    <script src=\"https://code.jquery.com/jquery-3.5.1.slim.min.js\"></script>\n    <script src=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js\"></script>\n</body>\n</html>\n```\n\nЦей код створює розумне рішення на основі Bootstrap, яке міняє блоки відповідно до різних розмірів екрана, наданих в завданні. Блоки працюють коректно для всіх типів пристроїв, включаючи -md-, -sm-, та -xs- розміри екрана.