如何使用引导程序在弹性布局中放大多张卡片

Question

我是Bootstrap的新手。我正在为Django中的应用程序布局。我正在尝试使用flex网格在卡片容器中显示多个图像，并通过单击操作放大它们。但是，我无法弄清楚为什么我的图像在该行的下一个项目下向右放大，以及如何使附近的项目移位而不是使它们位于放大的图像上。

 <script>
        function bigImg(x) {
          if (x.style.width == "150px") {x.style.width = "300px"; x.style.maxHeight = "900px";} else {x.style.width = "150px"; x.style.maxHeight = "300px";}              
        }
    </script>

  <div class="d-flex flex-wrap align-items-baseline flex-direction: column">
        {% for item in items %} 
        <div class="col-sm-2">
        <div class="card" style="width:150px ";>   
          <img src="{% static item.item_id %}" onclick="bigImg(this)" alt="{{item.item_id}}" class="card-img-top" style="width:150px; max-height:300px;">
          <div class="card-body">
          <input type="checkbox" name="items_to_remove" id="choice{{forloop.counter}}" value="{{item.id}}">
          <a href="{{item.item_dbkey}}">{{ item.id }}</a>
        </div>
        </div> 
      </div>
        {% endfor %}    
      </div>

非常感谢！