Arranging React Bootstrap columns in a way that the column on the right appears above the column on the left

Is there a way to use React Bootstrap to create a layout with two columns side by side, and have the column on the right stack on top of the column on the left when the screen size is reduced?

Check out the code snippet below:

import "./styles.css";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Card from "react-bootstrap/Card";

import "bootstrap/dist/css/bootstrap.min.css";

export default function App() {
  return (
    <div className="App">
      <Row>
        <Col sm={8}>
          <Card>
            <Card.Body>
              <Card.Title>Left Card/Bottom Card</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </Card.Text>
            </Card.Body>
          </Card>
        </Col>
        <Col sm={4}>
          <Card>
            <Card.Body>
              <Card.Title>Right Card/Top Card</Card.Title>
              <Card.Text>
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </Card.Text>
            </Card.Body>
          </Card>
        </Col>
      </Row>
    </div>
  );
}

For a live example, visit this codesandbox link

Answer №1

A solution is to utilize the order classes.

       <Container className="App" fluid={true}>
          <Row>
            <Col sm={8} className="order-last order-sm-first">
              <Card>
                ...
              </Card>
            </Col>
            <Col sm={4}>
              <Card>
                ...
              </Card>
            </Col>
          </Row>
       </Container>

Codeply

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

Click on the submenu to expand it, then simply select the desired option to navigate

I have created a toggle menu that displays a list of child elements when clicked, and hides them if clicked again. However, when a child element is clicked, I want it to navigate to the corresponding page. I am having trouble getting this functionality to ...

Arrangement of Bootstrap input and button side by side

Struggling to align input group and buttons together without them wrapping to new lines. Any assistance would be greatly appreciated. <script src="https://cdn.jsdelivr.net/npm/my-js-library/dist/js/bootstrap.bundle.min.js"></script> <link ...

Querying data from MongoDB using React and the Axios library

Hey there! I was attempting yesterday to retrieve data from my mongodb. Although the code shown above displays the json in the console, I am having trouble putting that json into the state. Can anyone provide assistance? Thank you for your help! :) impo ...

Compiling Nextjs with Tailwind typically takes anywhere from 8 to 16 seconds

My first time using tailwind has resulted in slow compilation times when used with nextjs in development mode. The slowdown can be confirmed by simply removing the following code: @tailwind base; @tailwind components; @tailwind utilities; This significan ...

Retrieving User's Theme Preference from Local Storage in Next.js Instantly

As mentioned in various other responses, such as this one, Next.js operates on both the client and server side, requiring a guard to properly fetch from localStorage: if (typeof localStorage !== "undefined") { return localStorage.getItem("theme") } else ...

How to sidestep NextAuth authentication by using an externally generated access token

This scenario may not be a common one and might not be considered the best practice, but for the specific needs of my project, I am required to utilize an access token passed as a parameter in the URL (e.g. http://localhost:3000?accessToken=myAccessToken) ...

Customize the width of dropdown menus in Bootstrap

Using a dropdown menu, I want to display options for candidates that can be chosen. Additionally, I would like an input field to filter these options; so that when text is entered, the dropdown menu adjusts accordingly. Specifically, I am looking to set th ...

The Bootstrap grid feature is malfunctioning on both Codeply and devtools. The dimensions of the <div class="col-lg-3 col-md-4 col-sm-6"> element remain constant despite attempts to adjust them

After experimenting with the viewport meta tag and enclosing it in a div class="container", I found that the issue persists on Codeply and Chrome DevTools. However, when I adjust my browser size, the problem seems to disappear. I also tried using various v ...

Is there a simple way to delete an element from a multidimensional array object in React JS?

In my current project using React Js, I'm facing an issue with removing an item that corresponds to the "product_option_value_id". The task at hand is to remove an item from the product_option_value (a child array object) if the given itemId matches t ...

"Graphs not Displaying Properly in ChartJs

Seeking assistance with rendering a chart inside a bootstrap popover. Despite various debugging attempts, the chart refuses to render. Any help or insight would be greatly appreciated. Below is my HTML code: <div id="popover-content" style=&qu ...

Update the less mixin

I attempted to eliminate the border radius from all Bootstrap elements by creating a custom-mixins.less file with the following lines in it. My intention was for these lines to overwrite the original .border-radius mixin, but unfortunately, it did not work ...

Transform a 3D text rotation JavaScript file into an Angular component tailored TypeScript file

I have a javascript file that rotates text in 3D format, and I need help converting it into an Angular component specific TypeScript file. You can find the codepen for the original JavaScript code here. Below are my Angular files: index.html <!doctyp ...

The styled-components seem to be having trouble injecting the necessary CSS to handle all the various props

I am curious to understand the potential reasons for styled-components not injecting all the necessary CSS into a page's header. In an existing project, I have defined a simple button like this: const Button = styled.button` background-color: ...

Alignment issue detected

I was attempting to center these 4 divs inside a container both horizontally and vertically, but they are stuck at the top edge of the <div>. They aren't moving down and remain fixed at the top. /* Footer */ #footer { width: 100%; hei ...

Utilize CSS to incorporate an image as the background of a <div> element

I'm a beginner in the world of HTML/CSS and this is my practice page. I have a section with an image of a person, and I'd like to add a quote next to the image. However, I'm struggling to make the image fill the entire width and height of th ...

What are some ways I can adjust line-height without changing the height of the cursor?

When working in a contenteditable div, I am utilizing line-height to create some spacing between lines. The following example illustrates the issue: <div style="padding: 50px; width: 90px; line-height: 2em;" contenteditable="true"> line height lin ...

The CSS background shadow on one div behaves differently compared to the neighboring div

Currently, I am facing an issue where I have two divs positioned next to each other in a line. http://jsfiddle.net/A5Jc7/60/ The HTML structure is as follows: <div> <div class="box1"></div> <div class="box2"></div> ...

Discover the steps to incorporate an external JS file into Next.js 12

I am encountering an issue in my Next.js project when trying to import a local JS file. Here is the code snippet I am using: <Script type="text/javascript" src="/js.js"></Script> Unfortunately, this approach results in the ...

How can I use jQuery to identify the numerical range within class/td/div elements and modify their CSS styles?

1# I need assistance in changing the CSS properties of a TD, Class, and div using a selector that specifies a specific number range. Specifically, I am looking to modify the css of torrent results with a seed count between 250-25000. Any torrents with a se ...

The image slider is blocking the dropdown functionality of the navbar on mobile devices

My code is experiencing a conflict of events. I have created a menu bar using nav bar, as well as an image slider called the caroussel. The issue arises when the window is minimized - the menu bar fails to drop down properly with the presence of the caro ...