How to stack flex containers?

[Snippet]

Hi, I have I need to be able to move the green box into the red box, the issue arise when i cant use flex-column because i need to change the orders in mobile

Current code:

<div class="row d-inline-flex ">
  <div class="col-xl-6">
    <!-- content 1 --> 
  </div>
  <div style="height:auto" class="col-xl-6">
    <div class="">
    <!-- content 2 -->
    </div>
  </div>
  <div style="height:auto" class="col-xl-6">
    <div class="">
      <!-- content 3 -->
  </div>
 </div>
</div>

such that content order on mobile becomes: content 2, then content 1, then content 3. Also I’m using align-self: start; on the col-xl-6 but tried removing that line and setting max-height without success.

[robheyays]

@Snippet

<div class="row d-inline-flex ">
  <div class="col-xl-6">
    <!-- content 1 --> 

On the face of it looks like to many div’s, I’m assuming you are using the correct meta veiwport code within the html head.

[Snippet]

Ahh yes i copied one extra div from the original code, I will edit it nevertheless to avoid confusion

@robheyays

I’m assuming you are using the correct meta veiwport code within the html head.

I hope so nevertheless you can check it in my website (in profile description; don’t want to break the rules and spam my link )

[Snippet]

Weelp it seems to not be possible…

[tracy.chacon.00]

@Snippet

i cant use flex-column because i need to change the orders in mobile

Would media queries be helpful here?

[AaylaSecura]

In general when using flex boxes that automatically wrap at an unknown width you can only reverse the order using wrap-reverse. If you want to have a completely custom order on mobile you have to use media queries. In your case that should be easy since the items have a fixed width of 670px, so you know the screen width at which they wrap. Then you can add a media query that sets the order property for one or more children to change their order, like for example

@media (max-width: 1350px) {
  .item-estandar:nth-child(3) {
    order: 2;
  }
}

[Snippet]

@tracy.chacon.00

Would media queries be helpful here?

That part I have figured it out I can easily set bootstrap order classes with responsive breakpoint, but because of this I cant use flex-column hence the dilemma

[Snippet]

@AaylaSecura

In general when using flex boxes that automatically wrap at an unknown width you can only reverse the order using wrap-reverse. If you want to have a completely custom order on mobile you have to use media queries. In your case that should be easy since the items have a fixed width of 670px, so you know the screen width at which they wrap. Then you can add a media query that sets the order property for one or more children to change their order, like for example

Thanks, but I’m afraid here is not about the “width wrapping” but “height wrapping” so to speak