Как расположить свой iframe ниже других (рядом)?

Question

Я изо всех сил пытаюсь, чтобы последний iframe был ниже, чем эти два iframe. Другими словами, они должны оставаться там как обычно. В то время как последний iframe должен быть ниже, имея внутри кнопку переключателя.

<!---iframes for both temp, illuminance and button-state.
  --->
  <br/>
  <div class = "box">
  <iframe src="https://thingspeak.com/channels/929272/charts/1?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" align="left">
  </iframe>
  </div>

<div class="box">
<iframe src="https://thingspeak.com/channels/929272/charts/2?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" align="right">
</iframe>
</div>
  <br/>
 <div class = "row">
 <div class = "col-md-4">
 <div class = "iframe-container">
<iframe  src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" frameborder="0" scrolling="no" width="100%" height="250" align = "middle">
 </iframe>
 </div>
 </div>
 </div>
<div class="clear">
  </div>

   <!----Toggle button for switching On/Off when is clicked.
  ---->
  <div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-danger locked_active">OFF</button>
 <button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
  </div>
 <br/>
  <!---DatePicker for startDate and endDate.
   ----> 
   <div class="d-flex justify-content-start">
   <div class = "col-xl-10.5 col-lg-10.5 col-md-10 col-sm-10.5 col-10.5">
 <div class="input-daterange input-group" id="datepicker">
   <input type="text" class="input-sm form-control" id="startdate" placeholder="startdate"/>
   <span class="input-group-addon">To</span>
   <input type="text" class= "input-sm form-control"id ="enddate" placeholder="enddate"/>
     </div>
     </div>
  </div><br>
<br>

Answer 1

Я наконец получил его, посмотрите мою демонстрацию ниже, это мой последний iframe должен быть.

 <br/>
  <div class="frame-wrap">
   <iframe src="https://thingspeak.com/channels/929272/charts/8?bgcolor=%23ffffff&color=%23d62020&dynamic=true&results=60&type=line&update=15" class="frame2" frameborder="0" scrolling="no" width="100%" height="250">
   </iframe>
 <!----Toggle button for switching On/Off when is clicked.
  ---->
  <div class = "wrapper" align = "center">
  <div class="btn-group" id="toggle_event_editing">
  <button type="button" class="btn btn-danger locked_active">OFF</button>
 <button type="button" class="btn btn-success unlocked_inactive">ON</button>
</div> 
<div class="alert alert-info" id="switch_status">Switched off.</div>
  </div>
 <br/>

  .frame2 {
    display: inline-block;
    box-sizing: border-box;
}