2x2网格上正确的div放置困难

Question

这是一个学校项目。制作2x2网格，其中3个图片和图片应该能够从“盒子到盒子”移动。除了较低的2个div之外，其他所有内容都是有序的。

前2名完全排成一行，但是当试图制作第二个时，他们要么紧挨着第一个（带有br所以它们有点低），或者然后在彼此之上第一个2.我知道这不是一个我想念的大事，但我似乎无法弄明白。

#loota {
  float: left;
  width: 200px;
  height: 283px;
  border: 2px solid #aaaaaa;
}
#loota2 {
  float: left;
  width: 200px;
  height: 283px;
  border: 2px solid #aaaaaa;
}

<div id="loota" ondrop="tiputus(event)" ondragover="siirto(event)">
  <img id="kuva1" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=200&h=283" draggable="true" ondragstart="veto(event)" width="200" height="283">
</div>


<div id="loota" ondrop="tiputus(event)" ondragover="siirto(event)">
  <img id="kuva2" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=200&h=283" draggable="true" ondragstart="veto(event)" width="200" height="283">
</div>
<br>
<div id="loota2" ondrop="tiputus(event)" ondragover="siirto(event)">
  <img id="kuva3" src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Placeholder&w=200&h=283" draggable="true" ondragstart="veto(event)" width="200" height="283">
</div>

<div id="loota" ondrop="tiputus(event)" ondragover="siirto(event)"></div>