Flexbox layout with two columns on desktop and one column on mobile

Since you don't have any weird switch of columns from mobile to desktop, what I'd do is this (and I believe is the cleanest way)

Start thinking mobile first (mobile first IS best practice) and then use media queries for desktop version. Basically set your container to display block and set the width of both columns inside it to 100%. then on desktop, make your container flex with a query.

CSS:

#flexContainer {
  display: block;
  background-color: blue;
}

@media only screen and (min-width: 1024px) {
  #flexContainer {
    display: flex;
  }
}

Or as I would do it in SCSS:

#flexContainer {
  display: block;
  background-color: blue;

     @media only screen and (min-width: 1024px) {
        display: flex;
     }
}