.templator {
  display: flex;
  flex-direction: column;
}

.templator__header,
.templator__footer {
  flex: 0 0 100%;
}

.templator__body {
  display: flex;
}

.templator__sidebar {
  /* ничего на небольших экранах */
}

.templator__sidebar--first {
  order: 1;
}

.templator__sidebar--second {
  order: 3;
}

.templator__content {
	order: 2;
}

.templator__content, .templator__sidebar--first, .templator__sidebar--second {
	align-items: flex-start;
	background-color: #f7f7f7;
	display: block;
	height: 190px;
	margin: 5px;
	width: auto;
}

@media all and ( min-width: 720px ) {

  .templator__body {
    flex-direction: row;
  }

  .templator__sidebar {
    flex: 0 0 180px;
  }

  .templator__content {
    flex: 1;
  }

}

@media all and ( min-width: 960px ) {

  .templator__sidebar {
    flex: 0 0 240px;
  }

}