Search code examples
cssreactjsflexbox

Swapping Element Position in Responsive Design w/ React & Material UI

I have a Sandbox of this project I am working on and while I'm happy with getting the JS part pretty much done, the Responsive Design is driving me a bit bonkers and I'm sure this is a simple solution with Flex but I cannot get it.

Currently the desktop view is correct and looks how it should, mobile and tablet however are not. In Mobile, the only issue is the image needs to be directly below the tabs but above the planet content. In Tablet, the Image is above both, which are then flexed together right below the image. I know one issue is I have a box container in FlexTest.js that holds BOTH the tabs and the content, so I was unable to use flex order for position there, but without those in the same container I was having issues getting them to position correctly in a different view.

This is what the design is meant to look like in case my description was really bad.

Solution

  • I would like to give its idea in tailwind-css.

    You need to switch the flex-row and flex-col properties to get this functionality to work in tailwind-css.

    Output in mobile devices

    enter image description here

    Output in large devices

    enter image description here

    Code:

    <div class="flex flex-col">
  <div class="bg-blue-400 text-center text-4xl">Header</div>
  <div class="flex-1 flex-col sm:flex sm:flex-row">
    <div class="flex items-center justify-center text-center">
      <img class="p-10" src="https://www.quicksprout.com/images/foggygoldengatebridge.jpg" alt="images" />
    </div>

    <div class="m-10 flex items-center justify-center border-4 border-red-400 text-3xl">Your Main content goes here</div>
  </div>
  <div class="bg-blue-400 text-center text-4xl">Footer</div>
</div>

    Tailwind-play