Keany

Можно с помощью флексов, через свойство order, подробнее https://developer.mozilla.org/en-US/docs/Web/CSS/C...

есть ли вариант чтобы верстка перестраивалась на больном расширении согласно макета чтобы не пршлось скрывать или показывать объекты?

Да, конечно и даже не один.
Вы совершенно верно в вопросе указали теги флекс и грид. Вот с их помощью.

Флекс
Десктоп: Оборачиваем контентyю часть в div. Родителю задаем флекс. Два элемента встают в ряд.
Мобилки: для контентного div задаем display: contents, после этого он станет как будто прозрачным или как будто его нет.
Ну и дальше с помощью order расставляем элементы в нужном порядке.

Грид
Несколько вариантов.
Первый с такой же оберткой как для флекса.
Второй - все элементы россыпью и просто меняем сетку.

https://codepen.io/kusakinvova/pen/ExJRvqO
вот как я решил проблему

document.querySelectorAll('.btn_clip').forEach(button => {
    button.addEventListener('mousemove', e => {
        // Получаем координаты курсора относительно кнопки
        const rect = button.getBoundingClientRect();
        const x = e.clientX - rect.left;
        const y = e.clientY - rect.top;

        // Устанавливаем переменные для текущей кнопки
        button.style.setProperty('--x', x + 'px');
        button.style.setProperty('--y', y + 'px');
    });
});