Как управлять расположением блоков при адаптивной верстке ?
решение на css с медиа запросами
ссылка на пример внизу
html:<div class="box">
  <div class="block block_1">block # 1</div>
  <div class="block block_2">block # 2</div>
  <div class="block block_3">block # 3</div>
</div>
css:.box{
  width: 400px;
  margin: 50px auto;
}

.box:before {
  background-color: rgb(100, 250, 100);
  display: block;
  content: "full";
}

.block {
  width: 33.3333%;
  height: 100px;
  border: 1px dotted black;
  box-sizing: border-box;
  display: inline-block;
}

.block_1 {
  float: none;
}

.block_2 {
  float: left;
}

.block_3{
  float: right;
}

@media (max-width: 600px) {
  .box:before {
    background-color: rgb(150, 150, 250);
    content: "mobile";
  }

  .block_1 {
    width: 100%;
  }

  .block_2 {
    width: 50%;
  }

  .block_3{
    width: 50%;
    float: left;
  }
}
codepen.io/iusfof/pen/Lmiep?editors=110 код в действии
Если есть возможность менять разметку, то красный блок ставьте первым в разметке. Это значительно упростит задачу. 
Если нет возможности править разметку, то через абсолютное позиционирование можно для нужного блока, но этот вариант в крайних случаях нужно использовать. Всё же стоит пересмотреть разметку, как уже сказали раньше.