Как менять расположение блока в мобильных устройствах?

Question

[asdasdqwe]

Пишу на реакт. Есть блок который в мобильных устройствах расположен в другом месте, есть способ динамически изменить расположение блока? Я могу через queryslecter append итд, но постоянно писать их неудобно. Может есть библиотека?

Answer 1

[wonderingpeanut]

Для начала нужно выяснить ширину экрана.

const [screenW, setScreenW] = useState(undefined);
useEffect(() => {
  setScreenW(window.innerWidth);
}, []);

Когда знаем ширину экрана, дальше все просто.
Если ширина экрана такая-то, отрисовываем один элемент. Если другая, отрисовываем другой элемент

const Component = () => {
  ...
  return (
    ...
    {screenW >= 1024 && <BigScreenComponent />}
    <SomeOtherComponent />
    {screenW < 1024 && <SmallScreenComponent />}
    ...
);