Is there a way to reorganize the layout of a container on mobile using this code?

Is it possible to rearrange this code for mobile view?

Currently, on desktop, the 

<div class="grid4-12">
(left) and 
<div class="grid8-12">
(right) are stacked on top of each other.
How can I adjust the code so that on a responsive design, 
<div class="grid8-12">
appears above and 
<div class="grid4-12">
is positioned below?

See the code snippet below

<div class="card-content-lg" style=" background: #ffffff;">
  <div class="grid4-12">
    <div class="quote-wrapper test">
      <div class="quote-col1 test">
        <div class="quote-image"><img alt="Image1" src="/images" /></div>
      </div>

      <div class="quote-col2 test2">
        <div class="quote-text">This is only test</div>
      </div>

      <div class="quote-col3">
        <div><img alt="ABC" src="/images" /></div>
      </div>
    </div>
  </div>

  <div class="grid8-12">
    <div class="card-content-md">
      <h2 class="abc">This is h2 text</h2>

      <p>This is a test.</p>

    </div>
  </div>
</div>

htmlcss

Answer №1

To create a responsive layout, apply display: flex with column flex-direction to the parent class (.card-content-lg). Then, for the second or right element, set order to -1. Adjust flex-direction to row on larger viewports and reset the order to 1.

.card-content-lg {
      display: flex;
      flex-direction: column;
    }

    @media all and (min-width: 640px) {
    .card-content-lg {
        display: flex;
        flex-direction: row;
      }
    }

    .grid4-12, .grid8-12 {
      background: gray;
      min-height: 6rem;
      margin: 1rem;
      padding: 1rem;
      color: white;
    }

    .grid8-12 {
      order: -1;
    }

    @media all and (min-width: 640px) {
      .grid8-12 {
        order: 1;
      }
    }
    <div class="card-content-lg" style=" background: #ffffff;">
      <div class="grid4-12">
        <div class="quote-wrapper test">
          <div class="quote-col1 test">
            <div class="quote-image"><img alt="Image1" src="/images" /></div>
          </div>

          <div class="quote-col2 test2">
            <div class="quote-text">This is only test</div>
          </div>

          <div class="quote-col3">
            <div><img alt="ABC" src="/images" /></div>
          </div>
        </div>
      </div>

      <div class="grid8-12">
        <div class="card-content-md">
          <h2 class="abc">This is h2 text</h2>

          <p>This is a test.</p>

        </div>
  </div>
</div>

Answer №2

Transform card-content-lg into a flexbox layout and implement media queries to flip the direction with flex-direction: row-reverse. Share your CSS code for us to include a functional demo.

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

Exploring the application of styles within the shadow DOM

I'm experimenting with applying styles to the shadow DOM. Consider the following example: const element = document.getElementById("bar"); const shadowRoot = element.attachShadow({ mode: "open" }); const greeting = document.createElement("p"); gree ...

javascripthtmlcssangularshadow-dom

The Bootstrap website is experiencing issues with mobile responsiveness as a result of content overflow

As a newcomer to web development, I am currently working on a Bootstrap website. Everything seemed to be working fine in desktop mode, but I encountered an issue in the mobile view where some Bootstrap columns were overflowing, causing a vertical white spa ...

htmlcsstwitter-bootstrapweb-deploymentbootstrap-5

What is causing the discrepancy in the height of my bootstrap 4 columns?

I recently started working with bootstrap 4 and I am having an issue with the columns not appearing at the same height as expected. Here is the code snippet I am using: <div class="row"> <div class="col-8"> <div class="projectDesc ...

htmlcsstwitter-bootstrapbootstrap-4

Mentioning VARs found on additional pages

I'm currently designing a website. At the moment, I have set up the site to prompt users for their name on the landing page and store it in a string variable. var username = ""; Once users enter their name and click "Enter Site," they are directed ...

javascriptjqueryhtml

Is it possible to adjust text wrapping based on the size of the screen?

I am currently facing an issue with my modal form where the text does not wrap properly depending on the size of the modal form. I need help with correcting this using CSS. My current approach involves using angular with new lines and hardcoding line brea ...

htmlcssangularjs

What is the best way to achieve consistent width in a material-ui card component?

How can I ensure that all these cards have the same width? https://i.stack.imgur.com/Ns3zw.png I'm experiencing an issue with achieving uniform card widths when using flexbox in material-ui. How can I resolve this? Is it necessary to utilize Grid fo ...

cssreactjsflexboxmaterial-ui

Android failing to adapt to font size changes set by media queries in HTML code

Recently, I've been facing an unusual issue on a Nexus 7 where changing the font-size on the HTML element seems to be ignored. Removing the smaller font size resolves the problem but creates new issues for phone displays. CSS: html { font-size: 10px ...

androidcsswebview

Searching for an index of a value fails after functions have been anonymized

I recently created a basic javascript animation that involves swapping images on a carousel and fading them in and out. My goal is to generalize the functions so that I can repurpose them for other projects. While most of the animation is functioning corr ...

javascriptjqueryhtml

I continue encountering the Server Error message: "Error: The default export on page "/products/all" is not a React Component."

I have been trying to create a page to display all the products listed in my server.json file (shown below). { "products": [ { "slug": "live-by-the-sun-love-by-the-moon", "title": "Live by the sun, love by the moon.", "price" ...

htmlreactjstypescriptnext.js

"Utilize Python's Selenium library to automate clicking the 'Get Data

Having trouble with clicking the GetData button to retrieve the output. Looking for assistance on how to achieve this. Update your code below:- from selenium import webdriver from selenium.webdriver.common.keys import Keys from selenium.webdriver.chrome.o ...

pythoncssselenium

Parsing nested json objects in an angular application

I'm trying to work with a complex nested JSON structure and I need to extract and display the data in HTML. The JSON data I have looks like this: { "Test Data": [ { "First Test": { "Design Name": "testname", "Output": "1" ...

htmljsonangulartypescript

The Angular Material error message is indicating that the function registerInput is not defined for this._chipList, causing

Issue Description Currently, I am encountering an error when attempting to retrieve input from an <input> tag and showcase it as chips in the graphical user interface (GUI). The console displays the following error message: "TypeError: this._chipLis ...

htmlangularangular-material

What happens when a browser can support multiple versions of a font - which one does it choose

If I have two versions of a font, customFont1.woff2 and customFont1.woff, and I list the woff2 version first followed by the woff version in the font declaration file, what happens when the browser supports both formats? Will it download both fonts or ju ...

htmlcssfontsfont-face

Keep rolling the dice until you hit the target number

Currently, I am in the process of learning JavaScript and one of my projects involves creating a webpage that features two dice images, an input box, and a button. The objective is for users to input a value, click the button, and then see how many rolls i ...

javascriptjqueryhtml

Viewing an image from a local file on a web browser

I am currently working on a project where I want the user to be able to select a local image that will then be displayed on the page. As someone who is new to web development, I did a lot of research and found some helpful information on StackOverflow. I t ...

htmlimageangulartypescriptfilereader

The formatting of ASP.Net MenuItems is not cascading down to the child items

I am facing a challenge while building an ASP.Net 4.5 menu programmatically in C#. The main issue is that the formatting of the child items is not inheriting from the top menu items as expected. Specifically, I am struggling with two formatting aspects: St ...

c#cssasp.netwebformsaspmenu

Acquiring the applicable CSS for a JavaFX 8 widget

While working on JavaFX styling with CSS, I encountered a challenge in understanding which CSS properties are directly affecting the appearance of a GUI widget. It reminded me of using Firefox web developer tools to inspect elements and view the specific s ...

javacssjavafx-8

Modify the Embed Audio Player in Google Drive

I am looking to integrate audio files from Google Drive into my website. While I have successfully embedded them, the issue lies in not being able to customize the player (as shown in the image below). Is there a way to modify the player? <iframe ...

javascripthtmlcssgoogle-drive-api

Toggle button in VueJS that dynamically shows/hides based on the state of other buttons

In my table, I have included options for the days of the week such as Everyday, Weekdays, and Weekend. Each row contains 2 select items to choose start and end times for updates. Additionally, there is a toggle button at the end of each row that enables or ...

cssvue.jstoggleshow-hide

Is there a way to conceal the filter section in a Power BI report?

I am currently utilizing a asp.net 4.5 web application in conjunction with Power BI Embedded to display my developed reports on PowerBI. Thankfully, this integration is functioning smoothly. My current objective is to conceal the "Filters" section located ...

c#cssasp.netpowerbipowerbi-embedded