What is the best way to rearrange the order of divs when the screen is being resized?

My task involves rendering a page with react-bootstrap on desktop, structured like this:

 <Row>
   <Col xs={12} md={8} className="a">
   </Col>
   <Col xs={6} md={4} className="b">
   </Col>
   <Col xs={6} md={4} className="c">
   </Col>
 </Row>

On the UI, it appears as follows:

| |_b_| | a |_c_| | | |

I am attempting to rearrange my layout when the screen size is less than 786 px, such as on mobile or tablet, to achieve the following structure: |_b_| | a | | | |___| | c |

I have tried using xsPull, mdPull, and flex-direction: column along with CSS re-ordering, but none of these solutions seem to be working. Is there something I am overlooking?

htmlcssreactjs

Answer №1

When designing a website, it's important to consider the logical reading order, especially for mobile users. However, on larger screens where visual hierarchy plays a bigger role, reordering content can be beneficial. It's recommended to start with a mobile-first approach and organize elements in a logical sequence:

To achieve this, you can set breakpoints where you adjust the order property within the flexbox model. Here is an example using simple class names:

@media (min-width: 40em) {
    .b { order: 2; }
    .a { order: 1; }
    .c { order: 3; }
}

This code snippet reassigns the order of elements at a specific screen width, helping you create a more user-friendly layout.

Answer №2

If you're searching for a solution, try using this method. The order property can also be helpful in adjusting the sequence as suggested by @denmch.

**HTML: **

<div class="container">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

CSS

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.item {
  height: 200px;
  background: green;
  width: 200px;
  border: 1px solid blue;
}

Fiddle

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 techniques can be used to ensure an element remains visible within the viewport

I am currently working with an HTML element that is displayed when a button is clicked, similar to a popup. My goal is to determine if the element is within the browser's viewport and then position it accordingly inside the viewport. Is there a proper ...

javascripthtmlcss

How to pass the Exact property in React MaterialUI Button with RouterLink Component?

I came across this code snippet: <Button activeClassName={classes.active} className={classes.button} component={RouterLink} exact={true} to="/app/certificates" > Certificates </Button> <Button activeClassName={classe ...

javascriptreactjsreact-routermaterial-ui

A helpful guide on rendering nested maps from JSON data in React.JS

I am attempting to display menu values from a JSON data. This menu has multiple levels, so I am using a nested map function to render the complete menu. const menu = { data:[ { title: "Home", child: [ { title: "SubL ...

javascriptjsonreactjslistdictionary

issues with background image alignment in css

I attempted to add a sticky background to a div, which was successful. However, I am encountering an issue where the background does not stretch enough during scrolling. Below is the CSS code I used to apply the background, along with screenshots displayin ...

htmlcss

Guide to switching a button using JavaScript

I am trying to create a button that will toggle the font size between 16px and 14px when clicked. The button text should also change from "Increase Font" to "Decrease Font" accordingly. UPDATE: I managed to get it working, but it only toggles twice and th ...

javascripthtmlcss

Passing an array to a React component retrieved through a fetch request in Redux

I am facing a challenge with returning an array to my React component from a fetch call to my Express server that I integrated into Redux. My goal is to extract and return the vitamins array from the JSON data fetched from Express: router.get('/&a ...

jsonreactjsreduxfetchredux-thunk

Is there a simple way to create a clickable popup menu without using JavaScript?

/*---Creating a Popup Menu with CSS---*/ .box{ position:fixed; top: 0.1%; left: 14px; display: inline-block; cursor: pointer; } ul{ list-style-type: none; } ul li{ font-family: Lato; padding: 10px; } ul li a{ text-decoration: none; color: black; } ul li:ho ...

htmlcss

ReactJS: Unable to navigate to a new page when moving from a page with automatic refresh

Every 5 seconds, I automatically refresh a page (Page1) using setTimeout and a callback function. However, every time I navigate to a new page (Page2), it quickly redirects back to Page1 after a few moments. I have tried using window beforeunload event l ...

javascriptreactjs

Improperly positioned Divs overlapping

Help needed: I am attempting to add a menu to a specific section. The menu div is extending off the page to the right, but it should be contained within the HOMEMENU section (the long black bar with no content). Despite using a clear:both div, the menu s ...

cssxhtmlhtml

What is the best way to dismiss a dialog in a separate component using Material-UI with React?

I'm working on a modal that contains a component within it. I am trying to figure out how to close the modal from that internal component. Here is the code snippet of the component I have: <Modal open={modalClients} onClose={handleCloseModalClien ...

reactjsreduxmaterial-ui

yet another scenario where the component's state changes without the component reflecting those changes

My react component includes a state variable called: showEditor When showEditor is set to false, the component should display a div containing a number (initially showEditor is false). If the state variable is true, the component should display a textbox ...

javascriptreactjsjsx

What are the best practices for integrating FontAwsome Icons into a Hyperstack project?

How can FontAwsome Icons be effectively utilized in a Hyperstack project integrating Rails and ReactJS, while utilizing Yarn to selectively include the necessary icons? ...

ruby-on-railsrubyreactjsisomorphichyperstack

How do I eliminate excess space following the resizing of the Material UI Drawer component?

I adjusted the size of my MUI drawer to a specific width and now I am facing an issue where there is extra space left after resizing. This results in a margin-like space between the drawer and the Lorem Ipsum text content. My goal is to eliminate this rema ...

cssreactjsmaterial-uinavigation-drawerwhitespace

Unveiling Fresh URLs within an iFrame

Here is the current situation: www.mywebsite.com/Pagex.html - On this page, there is an iFrame with a default URL (src) from a different domain than the host page (Pagex.html). The code inside the iFrame is a user input form with a submit button. Upon su ...

javascripthtmliframe

To properly render JSX elements in ReactJS, make sure to enclose adjacent elements within a wrapping tag. If you prefer to use a

Hey, I just started learning React and decided to create a blog. The blog elements are stored in an array and I'm using a map function to display the blog posts. However, when I add something to the map function, I encountered this error: Adjacent JSX ...

reactjsjsx

Is there a CSS equivalent of column-gap for rows?

After following this guide, I attempted to recreate the photo grid with some spacing between the images. Changing the column-gap property to 3px did add horizontal space, but is there a way to include vertical gaps as well? Any suggestions or solutions wou ...

htmlcss

You cannot edit FabricJS IText (and Textbox) within the context of React Bootstrap

I'm having trouble incorporating a canvas into my React Bootstrap component. Specifically, I am encountering issues with the text editing functionality when using IText and Textbox. Despite setting the corresponding properties, I am unable to modify t ...

javascriptreactjsfabricjsreact-bootstrap

How can I make rows appear dynamically when the user clicks a button?

I am trying to add rows dynamically when the user clicks on a button. I have created a script for this purpose, but unfortunately, it is not working as expected. Can someone please assist me with fixing it? <script> var i; i = 2; function AddR ...

javascripthtml

Should you construct a fresh element using JavaScript, or opt to reveal a concealed one using CSS?

What are the benefits of using the following approach: var target = document.getElementById( "target" ); var newElement = document.createElement( "div" ); $( target ).after( newElement ); compared to just hiding the newElement div with CSS and showing ...

javascriptjquerycss

Tips for concealing a chosen alternative from the menu of options when utilizing mat-select

I am currently working with the latest version of mat-select, version 16. I have a requirement where, when a specific option is selected and the select drop-down is clicked again, that selected option should not appear in the options list. Below is the HTM ...

htmlcssangularmat-select