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

Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writi ...

javascripthtmlcssiframewikipedia

Is it possible to locate both the child and parent elements by their class names simultaneously using WebDriver?

When conducting a search on eBay that returns more than 50 listings, such as this example, the site displays the results in either grid or list format. Using the WebDriver tool, I am extracting prices by their class name: https://i.stack.imgur.com/dGNzw. ...

pythonhtmlcssseleniumselenium-webdriver

Tips for utilizing SSR data fetching in Next.js with Apollo Client

Trying to integrate the apollo-client with Next.js, I aim to fetch data within the getServerSideProps method. Let's consider having 2 components and one page- section.tsx represents component-1 const Section = () => { return ( <div& ...

javascriptreactjsnext.jsapollo-clientreact-apollo

Retrieving a PHP script from within a DIV element

I am seeking assistance to successfully load a PHP file from a DIV call. Below is the code I have used: <html> <head> </head> <body> <script class="code" type="text/javascript"> $("#LoadPHP").load("fb_marketing ...

phpjavascripthtml

What is the best way to access the original observed node using MutationObserver when the subtree option is set to

Is there a way to access the original target node when using MutationObserver with options set to childList: true and subtree: true? According to the documentation on MDN, the target node changes to the mutated node during callbacks, but I want to always ...

javascriptreactjstypescriptdommutation-observers

Unable to center div container with margin set to auto

I'm struggling to center my container on the website. My goal is to have it centered and take up about 80% of the page so I can incorporate an image slider and text inside. Using margin: 0 auto doesn't seem to be achieving what I want. The backgr ...

jquerycsshtmlweb

Trouble arises when rendering nested components in React Router 4

My issue lies with implementing React Router 4 while utilizing "nested" routes. The problem arises when one of the top routes renders a component that matches the route, even though I do not want it to be rendered. Let me provide the relevant code snippets ...

javascriptreactjsreact-routermaterial-uireact-router-v4

ClickAwayListener in Material-UI triggers instantaneously

When I click to open my drawer, the click away listener triggers at the same time and closes the drawer immediately. This happens because I use a menu icon to open it, but that icon is located outside of the drawer causing it to close instantly. Any sugg ...

reactjsmaterial-ui

Tips for eliminating repetitiveness in situations such as BEM modifiers

As I delved into using my own adaptation of the BEM methodology, I encountered a roadblock with modifiers for nested elements. The challenge at hand is changing the link color to red when product-desc-name has the mark class. The snippet below illustrat ...

cssbem

What are the steps to personalize Twitter Bootstrap with Less for changing the height of the Navbar?

I recently stumbled upon some interesting articles that explain how to customize various elements of Twitter Bootstrap using LESS. You can check out one of the articles here and find more information about Twitter Bootstrap here. However, I am still unsure ...

csstwitter-bootstrapless

Error in child component's class name with babel-plugin-react-css-modules

I'm currently implementing babel-plugin-react-css-modules in an existing React project. Most of the components are working as expected, but I've encountered an issue with passing styles to child components. My parent components look like this: ...

reactjswebpackbabel-plugin-react-css-modules

Verify the presence of a particular attribute in an HTML tag using Capybara and polling techniques

In my HTML code, the attributes of buttons (such as "AAAAA") will change based on external events. This real-time update is achieved through AJAX pooling. <div class="parent"> <div class="group"><button title="AAAAA"/></div> <di ...

javascripthtmlruby-on-railsajaxcapybara

How can we use jQuery to animate scrolling down to a specific <div> when clicking on a link in one HTML page and then navigating to another HTML page?

I'm currently working on creating a website for my friend who is a massage therapist. Utilizing a bootstrap dropdown menu, I have added links to different treatments that direct to the treatment.html from the index.html page. Is there a way to creat ...

javascriptjqueryhtmlcss

Using React and Material-UI: Implementing button functionality to call another class using hooks in the main App component

Just starting out with React/MUI and currently working on different components for a website, so the UI is not a priority at the moment. Encountering an issue when trying to create a button that links to the Sign Up page (similarly for Sign In): Error: ...

javascriptreactjsmaterial-ui

Altering Image Order Across Various Slides

I have customized a parallax website template that is divided into various sections and slides. I want to incorporate a fixed image sequence on each slide that animates based on the scroll position. With 91 images in the animation sequence, it moves quickl ...

javascriptjqueryhtmlcss

Sending various values to a JavaScript function

I am working with a function that looks like this: //Function Call with Single Parameter responses(baseURL); //Function Definition function responses(baseURL) { $.ajax({ url: baseURL, type: "get", cache: false, header ...

javascripthtmlarraysajax

Choosing a specific category to display in a list format with a load more button for easier navigation

Things were supposed to be straightforward, but unexpected behaviors are popping up all over the place! I have a structured list like this XHTML <ul class = "query-list"> <li class="query"> something </li> <li class="query" ...

javascriptjquerycssmeteor

Is Next.js considered a single-page application or an SPA?

Traditional React applications are commonly referred to as Single Page Applications (SPAs) because they typically consist of only one html page, the index.html. However, Next.js differs from this convention. So, is it accurate to label a Next.js applicat ...

reactjsnext.js

"Looking to expand the spacing between header options in React. Any tips on increasing the blank

Hey there! I'm currently working on aligning my figma design with my react web app. Specifically, I am looking to adjust the spacing between the options in the header section. Does anyone have any suggestions on how to achieve this? Thanks in advance! ...

reactjs

Encountering a top-level-await issue while utilizing the NextJS API

Currently, I am in the process of creating an API using NextJS and MongoDB. To start off, I have set up some basic code at the beginning of the API file: const { db } = await connectToDatabase(); const scheduled = db.collection('scheduled'); Fol ...

javascriptnode.jsreactjsnext.js