Для создания данного расположения блоков можно использовать свойство display: grid в сочетании с медиа-запросами для реализации адаптивной версии для мобильных устройств.
1. Создайте контейнер, который будет содержать все три блока div. Назовем его "container".
2. Установите свойство display: grid для контейнера "container" в соответствующей медиа-запросу.
3. Установите количество столбцов для контейнера "container" в зависимости от желаемого расположения блоков. Например, для десктопной версии установите 3 столбца, а для мобильной версии - только 1 столбец.
4. Установите ширину для каждого блока в зависимости от желаемого расположения. Например, для desktop-версии, установите ширину блоков div_1, div_2 и div_3 соответственно как 1, 1 и 2 столбца.
5. Для мобильной версии установите ширину блоков div_1 и div_2 как 1 столбец, а для блока div_3 - определите, что он должен быть размещен на всю доступную ширину.
Вот пример кода, который демонстрирует это:
```html
<div class="container">
<div class="div_1">Block 1</div>
<div class="div_2">Block 2</div>
<div class="div_3">Block 3</div>
</div>
```
```css
.container {
display: grid;
grid-template-columns: 1fr 1fr 2fr; /* desktop-версия */
}
.div_1 {
grid-column: 1;
}
.div_2 {
grid-column: 2;
}
.div_3 {
grid-column: 3;
}
/* Медиа-запрос для мобильной версии */
@media screen and (max-width: 768px) {
.container {
grid-template-columns: 1fr; /* мобильная версия */
}
.div_3 {
grid-column: 1 / span 2; /* растягиваем блок div_3 на всю ширину */
}
}
```
Таким образом, блоки div_2 и div_3 будут располагаться справа от блока div_1 для десктопной версии, а для мобильной версии блок div_3 будет занимать всю ширину экрана.