How to lay out blocks with flexbox?

Question

css

I don’t understand how to arrange the blocks without changing the html markup

The markup itself https://jsfiddle.net/jdu1oLqj/

Answer 1

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
  padding: 0 10px;
}
.content,
.content-details,
.sidebar {
  padding: 10px;
}
.content {
  order: -1;
  width: calc(100% - 200px);
  background-color: #DDD;
}

.content-details {
  background-color: orange;
  order: 1;
  width: 100%;
}

.sidebar {
  width: 200px;
  background-color: green;
  order: 0;
}