How to change block location in mobile devices?

Question

React

I am writing in react. There is a block that is located in a different place in mobile devices, is there a way to dynamically change the location of the block? I can append through queryslector etc, but it's inconvenient to write them all the time. Maybe there is a library?

Answer 1

First you need to find out the width of the screen.

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

When we know the width of the screen, then everything is simple.
If the screen width is such and such, we draw one element. If different, draw another element

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