'How do I change the order of a container in mobile with this code?

How do I change the order of this code in mobile?

Currently on desktop <div class="grid4-12">(left) and <div class="grid8-12">(right) are stacked to each other.
How do I change the code in responsive such that <div class="grid8-12"> is on top and <div class="grid4-12"> is at the bottom?

Code 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


Solution 1:[1]

You can give the parent class (.card-content-lg) a display value of flex, with flex-direction set to column. Then, on the "second" / "right" element, give it a value of "order: -1;". Then, change the value of flex-direction to "row" on larger viewports, and change the order back 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>

Solution 2:[2]

make card-content-lg a flexbox and use media queries to reverse direction using flex-direction: row-reverse add css of your code so we can attach a working sample as well.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 yerme
Solution 2 rootShiv

Related Questions