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

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

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

Code below

<div  style=" background: #ffffff;">
  <div >
    <div >
      <div >
        <div ><img alt="Image1" src="/images" /></div>
      </div>

      <div >
        <div >This is only test</div>
      </div>

      <div >
        <div><img alt="ABC" src="/images" /></div>
      </div>
    </div>
  </div>

  <div >
    <div >
      <h2 >This is h2 text</h2>

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

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

CodePudding user response：

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.

CodePudding user response：

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  style=" background: #ffffff;">
      <div >
        <div >
          <div >
            <div ><img alt="Image1" src="/images" /></div>
          </div>

          <div >
            <div >This is only test</div>
          </div>

          <div >
            <div><img alt="ABC" src="/images" /></div>
          </div>
        </div>
      </div>

      <div >
        <div >
          <h2 >This is h2 text</h2>

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

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