Left Column and Stacked Right Column Using Flexbox Css

Left column and stacked right column using flexbox CSS

It looks like you were almost there. Just two more steps:

Define a height for the flex container

Without a defined height some browsers may not know where to wrap. Try this:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px; /* new; value just for demo purposes */
}

Turn off wrap on mobile view

@media (max-width: 500px) {
   .container { flex-wrap: nowrap; } /* new */
   .cell { width: 100%; }
   .cell-1 { order: 2; }
   .cell-2 { order: 1; }
   .cell-3 { order: 3; }
}

.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 500px;
}
.cell {
  background: #ccc;
  border: solid 3px black;
  width: 50%;
}
.cell-1 {
  flex-basis: 100%;
}
@media (max-width: 500px) {
  .container {
    flex-wrap: nowrap;
  }
  .cell {
    width: 100%;
  }
  .cell-1 {
    order: 2;
  }
  .cell-2 {
    order: 1;
  }
  .cell-3 {
    order: 3;
  }
}

<h1>Vertical Boxes</h1>
<p>Goal: Have one box on the left, and two boxes on the right that are stacked. All without nesting, so that the order of the boxes can be changed on smaller screen sizes.</p>
<div class="container">
  <div class="cell cell-1">
    <h2>One</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit
    amet, consectetur adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur
    adipisicing elit. Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    Iusto pariatur rerum, illum accusantium cupiditate ipsam, eaque quae fugit cum assumenda ad. Modi, excepturi. Assumenda, nobis, consequatur? Aliquid repellendus quis, iure.
  </div>
  <div class="cell cell-2">
    <h2>Two</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste mollitia temporibus id sint illum doloremque pariatur nulla vel soluta, nostrum vitae, suscipit ea natus sed eaque in velit deserunt deleniti!
  </div>
  <div class="cell cell-3">
    <h2>Three</h2>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit, architecto perferendis voluptatum accusantium est ipsam fugit, laudantium fugiat nostrum consectetur earum. Asperiores, similique deleniti nobis nemo error, iste iure architecto.
  </div>
</div>

CSS flexbox fill available space to the right side of a slim but high element with elements while ignoring flex-direction row/column axis restrictions

You can use display grid along with a media query and just reorder the grid-template-areas from grid-template-areas: "el1 el2" "el1 el3"; to grid-template-areas: "el1 el2" "el3 el3";. Display grid allows the element to be moved anywhere in its parents border-box regardless of its linear layout in the HTML markup.

*{
  margin: 0;
  padding: 0;
}
.grid-container {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas: 
    "el1 el2" 
    "el1 el3";
  height: 100vh;
}

.el1 {
  grid-area: el1;
  border: 1px solid blue;
}

.el2 {
  grid-area: el2;
  border: 1px solid red;
}

.el3 {
  grid-area: el3;
  border: 1px solid green;
}

@media screen and (max-width: 600px) {
.grid-container {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "el1 el2"
    "el3 el3";
    height: 100vh;
}
.el1 { grid-area: el1;}
.el2 { grid-area: el2;}
.el3 { grid-area: el3;}
}

<div class="grid-container">
  <div class="el1"></div>
  <div class="el2"></div>
  <div class="el3"></div>
</div>

How can I change the layout and order of children with flexbox?

You may like to look at grid which will allow you to name areas and assign elements to them.

Then you can redefine the areas when the max-width is at some value.

This saves having to go through all the affected elements and specify their order.

Here's a simple snippet. It puts a background color on each element so you can see which is being allocated to where.

Obviously you'll want to look at exactly the proportions you want the header to take up compared to the paragraph and so on but this is to get you started.

.container {
  display: grid;
  min-width: 600px;
  width: 25%;
  aspect-ratio: 1 / 1;
  gap: 10px;
  grid-template-areas:
    'I H'
    'I P'
    'I P'
    'I P';
  background: pink;
  grid-template-columns: 1fr 1fr;
}
h1 {
  grid-area: H;
  background: cyan;
}
img {
  grid-area: I;
  background: magenta;
  object-fit: cover;
  width: 100%;
  height: 100%;
}
p {
  grid-area: P;
  background: yellow;
}
@media (max-width: 600px) {
  .container {
    grid-template-areas:
      'H'
      'I'
      'P';
  }
}

<div class="container">
  <h1>Heading</h1>
  <img src="https://picsum.photos/id/1015/200/600">
  <p>Paragraph text<br>Paragraph text<br>Paragraph text<br>Paragraph text<br>Paragraph text<br></p>
</div>

Flex with a taller left column and right column that fills with smaller items

This is achievable by using some CSS for nth-child and by using Flex: columns

I found this out from this website: https://tobiasahlin.com/blog/masonry-with-css/

display: flex;
flex-flow: column wrap;

will ensure they go into column order.

nth-child(-n+6){ order: 2; } will select the first 6

first-child{ order: 1;} resets the first one

At that point they will flow neatly and only wrap after the space has been filled in.

How to align flexbox columns left and right?

You could add justify-content: space-between to the parent element. In doing so, the children flexbox items will be aligned to opposite sides with space between them.

Updated Example

#container {
    width: 500px;
    border: solid 1px #000;
    display: flex;
    justify-content: space-between;
}

#container {    width: 500px;    border: solid 1px #000;    display: flex;    justify-content: space-between;}
#a {    width: 20%;    border: solid 1px #000;}
#b {    width: 20%;    border: solid 1px #000;    height: 200px;}

<div id="container">    <div id="a">        a    </div>    <div id="b">        b    </div></div>

Left Column and Stacked Right Column Using Flexbox Css