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

What is the method for increasing the left margin of the back button on the default header in React Native?

My attempt to increase the space on the back button from the left side of the header in my React Native code has been unsuccessful. headerStyle: { paddingLeft: 60 } https://i.stack.imgur.com/0RFb0.png I also experimented with adding margin ...

Get rid of the strange border on the material dialog

I am struggling with the Angular material 6 dialog component as it is displaying a strange border. I have attempted to remove it using the code below, without success. Interestingly, when I apply the style inline in the browser, it works fine. Any suggesti ...

Tips for combining values with Reactive Forms

Is there a way to merge two values into a single label using Reactive Forms without utilizing ngModel binding? <label id="identificationCode" name="identificationCode" formControlName="lb ...

Querying the api for data using Angular when paginating the table

Currently, I have a table that retrieves data from an API URL, and the data is paginated by default on the server. My goal is to fetch new data when clicking on pages 2, 3, etc., returning the corresponding page's data from the server. I am using an ...

Hiding the keypad on an Android device in an Ionic app when user input is detected

I am currently utilizing the syncfusion ej2 Calendar plugin for a datepicker, but I am only using options such as selecting ranges like today, 1 month, or last 7 days from the plugin itself. The plugin provides dropdown options when the calendar is trigger ...

Vue JS encountering Slack API CORS issue while using axios

I am currently developing an application using Capacitor JS & Nuxt JS to interact with the Slack API for setting my Slack status. I have successfully created a Slack App and obtained a xoxp- token, which works perfectly when sending a POST request via Post ...

Is there a way to reach my vue instance while inside a v-for iteration?

When using a v-for loop, I encounter an error: <div v-for="index in 6" :key="index"> <div class="card h-100" style="margin-top: 200px;"> <a href="#"> <img ...

The Highcharts download feature is not available when the title is removed

After setting the title of my chart to null, I noticed that I am no longer able to access the download menu on the chart. Check out this example for reference: http://jsfiddle.net/JVNjs/954/ var chart = new Highcharts.Chart({ chart: { renderT ...

Persistent footer overlaps lower body content

Issue with Sticky Footer in Safari I recently added a sticky footer to my website, but I'm facing problems with it covering the body content on Safari. It works fine on Chrome and Firefox after adding a bottom margin to the body to adjust for the hei ...

Exploring point clouds with three.js and NSF OpenTopography data: What's the best way to configure the camera and implement a controls library for seamless data navigation?

Currently, I am engaged in a small-scale project aimed at showcasing NSF OpenTopography data through a point cloud visualization using three.js. While I have successfully generated the point cloud, I am encountering significant challenges with setting up t ...

Tips for optimizing the "framerate" (setInterval delay) in a JavaScript animation loop

When creating a JavaScript animation, it's common practice to use setInterval (or multiple setTimeouts) to create a loop. But what is the optimal delay to set in these setInterval/setTimeout calls? In the jQuery API page for the .animate() function, ...

Is there a way to track and monitor the ngRoute requests that are being made?

I am in the process of transferring a fairly large Angular 1.6 application from an old build system to Yarn/Webpack. Our routing is based on ngRoute with a complex promise chain. While sorting out the imports and dependencies, I keep encountering this err ...

Using CSS min-height: 100vh will ensure that the container has enough height to fill the entire viewport

Utilizing min-height: 100vh; in my inner call to action div placed on top of a background video has been mostly successful. However, I've encountered an issue where using 100vh with the absolutely positioned video seems to introduce an unwanted margin ...

Any modifications made to a copied object will result in changes to the original object

The original object is being affected when changes are made to the cloned object. const original = { "appList": [{ "appId": "app-1", "serviceList": [{ "service": "servic ...

Customizing background size for iOS devices

This morning, I delved into research on a particular issue. Currently, I am crafting a single-page website that heavily relies on images. While Safari is usually criticized for its quirky handling of background-attachment:fixed, it seems to be working fine ...

Completely triggering a forced refresh on a single page application, disregarding cache, service workers, and all other

After experimenting with service workers on my Vue-built website, I made a critical error that has left Safari on my iPhone displaying only a blank page. To troubleshoot the issue, I connected my phone to my Mac and utilized Safari's inspector tool t ...

Issue with rendering icon in react material-table after clicking

After spending several days searching, I am still unable to figure it out. What I want is for the visibility icon to change to "hide" when clicked. However, I'm facing an issue where it's not rendering automatically. I have to type something in t ...

Access the ID within the onClick function in Next.js that is already accessible from getServerSideProps

I am currently facing an issue where I need to access id1 from getServerSideProps within an onclick function. I attempted to use useState inside getServerSideProps and tried to access it within the onclick function. However, I am unable to console.log(id ...

Unable to show the company logo in the navigation bar

Working on a pizza site and encountering an issue - trying to add the logo of the place to the navbar (which also links to the main page) but it's not displaying. Using Twitter Bootstrap for this project. Here is the code snippet: /*#557c3e green*/ ...

The Navigation Bar in Vue Component Renders Incorrectly due to Bootstrap Integration

I am facing an issue with my Bootstrap navbar not displaying correctly within my Vue component. It is appearing as a stacked greyed out button, almost like it's assuming it's on a small device. https://i.sstatic.net/yoPvO.png You can find the c ...