Switching the vertical alignment of grid items in Material UI when the page is collapsed

When the page is collapsed, the Left grid item element moves to the top of the page and the Right grid element is positioned below it. I would like to reverse this behavior so that the Right element appears on top and the Left element below when the page is collapsed. I am curious about the best way to achieve this using Material UI.

function Test(props){

  const { classes } = props;
  return (
     <div className = {classes.bgImage}> 

      <Grid container classes={classes.root} spacing={2}>
        <Grid item lg={6} spacing={1}>
          <Paper>

            Left

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum.

            In sed lacinia lacus, et dictum sem. Morbi semper venenatis sapien, vel tincidunt justo. Aliquam eu nunc id massa fermentum hendrerit. Suspendisse at justo rhoncus, varius turpis ut, sodales sem. Suspendisse suscipit, arcu vitae luctus aliquam, quam urna malesuada neque, ac mollis justo dolor eu sem. Vestibulum fringilla dui sit amet arcu luctus tincidunt. In blandit, arcu eu rhoncus mollis, ligula tellus volutpat 

         </Paper>
        </Grid>
        <Grid item lg={6} spacing={1}>
          <Paper>        

            Right

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum.

            In sed lacinia lacus, et dictum sem. Morbi semper venenatis sapien, vel tincidunt justo. Aliquam eu nunc id massa fermentum hendrerit. Suspendisse at justo rhoncus, varius turpis ut, sodales sem. Suspendisse suscipit, arcu vitae luctus aliquam, quam urna malesuada neque, ac mollis justo dolor eu sem. Vestibulum fringilla dui sit amet arcu luctus tincidunt. In blandit, arcu eu rhoncus mollis, ligula tellus volutpat urna, sit amet laoreet odio erat dapibus erat. Phasellus porta dui sed 

         </Paper>
        </Grid>
      </Grid>
    </div>
  )
}

Answer №1

To implement the order property, follow this example

import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles(theme => ({
  gridItem1: {
    [theme.breakpoints.down("lg")]: {
      order:2
    }
  },
  gridItem2: {
    [theme.breakpoints.down("lg")]: {
      order:1
    }
  },
.
.
//other styles
.
.
}));

// ..

  const classes = useStyles();
  return (
     <div className = {classes.bgImage}> 

      <Grid container classes={classes.root} spacing={2}>
      <Grid item lg={6} spacing={1} classes={gridItem1}>
         <Paper>

          Left



         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum.

         In sed lacinia lacus, et dictum sem. Morbi semper venenatis sapien, vel tincidunt justo. Aliquam eu nunc id massa fermentum hendrerit. Suspendisse at justo rhoncus, varius turpis ut, sodales sem. Suspendisse suscipit, arcu vitae luctus aliquam, quam urna malesuada neque, ac mollis justo dolor eu sem. Vestibulum fringilla dui sit amet arcu luctus tincidunt. In blandit, arcu eu rhoncus mollis, ligula tellus volutpat 


         </Paper>
        </Grid>
        <Grid item lg={6} spacing={1} classes={gridItem2}>
         <Paper>        

          Right


        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque commodo tellus. Donec elit diam, accumsan non mi et, pellentesque pretium leo. Morbi pretium odio ut urna blandit, vel congue tellus vehicula. Aenean pharetra mi justo, et sagittis eros luctus vitae. Pellentesque adipiscing vestibulum sapien. Ut quis mauris ac diam facilisis elementum. Nam mattis nisl a metus placerat rutrum.

        In sed lacinia lacus, et dictum sem. Morbi semper venenatis sapien, vel tincidunt justo. Aliquam eu nunc id massa fermentum hendrerit. Suspendisse at justo rhoncus, varius turpis ut, sodales sem. Suspendisse suscipit, arcu vitae luctus aliquam, quam urna malesuada neque, ac mollis justo dolor eu sem. Vestibulum fringilla dui sit amet arcu luctus tincidunt. In blandit, arcu eu rhoncus mollis, ligula tellus volutpat urna, sit amet laoreet odio erat dapibus erat. Phasellus porta dui sed 

         </Paper>
        </Grid>
      </Grid>
    </div>
  )
}

Answer №2

In the depths of material-ui lies a simple flexbox structure. Flexbox items possess a CSS property called 'order' which can be adjusted to meet your specific requirements. Simply add this property to the grid item styles.

Here are some helpful references:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for resolving the issue of receiving a warning about passing "onClick" to a "<Link>" component with an `href` of `#` while having "legacyBehavior" enabled in Next.js

My current project is displaying a lot of warnings in the browser console and I'm unsure about the reasons behind it. The warnings include: "onClick" was passed to with href of /discovery/edit but "legacyBehavior" was set. The l ...

Filtering out section boxes does not eliminate empty spaces

Link to Fiddle I've run into a bit of a roadblock while trying to filter my section box for a project I'm currently working on. The issue I'm facing is that instead of collapsing the first section box to display only the filtered options, i ...

"Oops! Vite seems to be facing an issue as RefreshRuntime.injectIntoGlobalHook function is

Our CRA react app has been transitioned from webpack to Vite. Problem: When running the application locally in production mode, I encounter the following error: 1. Uncaught TypeError: RefreshRuntime.injectIntoGlobalHook is not a function at (index):6:16 ...

Guide to using AJAX for the GraphHopper Matrix API

I am struggling to send this JSON with the required information because I keep encountering an error during the request. message: "Unsupported content type application/x-www-form-urlencoded; charset=UTF-8" status: "finished" I'm not sure what I&apos ...

Adjust the sizes of the points according to the level of zoom

I've been working on creating a dynamic map in d3.js that displays US Science funding agencies as points, with their sizes scaling based on zoom level. I referred to this starter kit for guidance. While there are other solutions out there, they often ...

How to style 1 out of every 3 div elements using absolute positioning in CSS

Imagine a setup where there is a banner at the top, with 3 divs placed side by side underneath it. The interesting part is that when you scroll down, only the center and right div should move along. #banner { background:blue; color:white; position ...

The 'Image' component does not have a propType defined for the native prop 'RCTImageView.overlayColor' with a native type of 'number'

Greetings, I am encountering an issue while attempting to run my react native application on Android. The app has been functioning flawlessly on iOS for several months, but this is our first endeavor at utilizing it on Android. We are using react-native .1 ...

The MIME type text/html was ignored along with the AddType directive

Encountering an issue where attempting to load a CSS file from a folder results in the console error: "Resource interpreted as Stylesheet but transferred with MIME type text/html". Attempts to resolve this by adding an .htaccess file (in the root/same fold ...

Problem arises when the DIV elements are not expanding horizontally together

Struggling to create a round corner box using divs. I have been working on it all day and can't figure out what I'm missing. If anyone could help me spot the issue, that would be great. I want the 'header' and 'footer' to exp ...

Harnessing the power of JavaScript functions to display an image when clicked

Looking for help with making an image appear when clicking on one of three images? Despite trying different approaches, the desired result is still not achieved. I'm aware of using if else statements but exploring other methods. Any insights on what m ...

Is it possible to represent a recursive variable using CSS?

When it comes to the html structure: <body> <div> <div> <div> ... </div> </div> </div> </body> Is there a method to create recursive variables that utilize their parent's value: body ...

When using expressjs and typescript, you may encounter an error stating that the type 'typeof <express.Router>' cannot be assigned to the parameter type 'RequestHandlerParams'

Working on my project using expressjs with the latest typescript definition file and typescript 2.3.4 from https://github.com/DefinitelyTyped/DefinitelyTyped. I've set up a router and want to access it from a subpath as per the official 4.x documentat ...

Using JavaScript to organize and reformat JSON data into grouped structures

In my dataset, I am unable to make any formatting adjustments or modifications. //input json data [ { "Breaks":[ {"points":12,"points_total":12,"average":8.0,"faults":[]}, {"points":17,"points_total":29,"average ...

What is the best way to implement CSS rules for a hidden submenu?

Can anyone help me figure out how to apply CSS rules for a hidden submenu? I've attempted to use some JavaScript, but it's not working as expected. Below is a sample of the code I'm working with. The idea is that when you click on the anchor ...

What is the best way to supply JSON data to the "The Wall" MooTools plugin while feeding?

I came across this amazing plugin called "The Wall" but unfortunately, neither the documentation nor the examples demonstrate how to utilize JSON objects with it. Imagine we have a JSON array like: [ { href : "/my/photo/image1.jpg", title : "Me an ...

Tips for Choosing Two Classes Using CSS

I'm currently exploring ways to select two classes so that when one of them is hovered over, a specific animation will occur. Here is my latest attempt: .news1 { -webkit-filter: blur(3px); filter: blur(3px); -webkit-transition: .3s ease-i ...

Developing a personalized loop in handlebars templates

Just starting out with NodeJS and ExpressJS. I'm looking to customize a for loop in order to iterate through data from NodeJS using an index, akin to a non-traditional for loop. Take a look at the code snippet below, extracted from NodeJS, where I re ...

Develop a PDF generator in ReactJS that allows users to specify the desired file name

Is there a way to customize the file name of a generated PDF using "@react-pdf/renderer": "^2.3.0"? Currently, when I download a PDF using the toolbar, it saves with a UID as the file name (e.g., "f983dad0-eb2c-480b-b3e9-574d71ab1 ...

Triggering of NVD3 Angular Directive callback occurring prematurely

Lately, I've delved into utilizing NVD3's impressive angular directives for crafting D3 charts. They certainly have a sleek design. However, I'm encountering numerous challenges with callbacks. While callbacks function smoothly when incorpor ...

Using the -webkit-box-reflect property along with the CSS position:absolute styling

Running on the Chrome Canary build, I have come across this HTML code snippet: <div id="debug" class="debug" >TEST</div> Additionally, here is the CSS code snippet: -webkit-box-reflect: below 0px -webkit-gradient(linear, ...