Bootstrap崩溃正在更改网格中的列位置

Question

请有人帮助解决此问题。我正在使用bootstrap崩溃来折叠div。当我展开合拢的div时，col div会改变位置。请查看下面的屏幕截图以了解以下内容，

倒闭的Div： Collapsed div screenshot

当我单击“个人信息”时：这样扩展，这不是我想要的方式。 Expanded div screenshot with wrong div position

但是，这就是我希望它随着div位置正确而扩展的方式。 Expected expanded div position screenshot

这是此特定帧的HTML代码。

   <form autocomplete="new-password" id="formid" action='' method="POST" enctype="multipart/form-data" novalidate>
<div class="overview_form_block row marl ">
   <div class="col-md-12">
      <div class="card">
         <div class="card-body">
            <div data-toggle="collapse" data-target="#collapse1" class="card-title text-center">
               PERSONAL INFORMATION
            </div>
            <div id="collapse1" class="row marl">
               <div class="col-md-6">
                  <div  class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1" class="required">Last Name{% if employment_form.last_name.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.last_name }}
                        <span class="error">{{ employment_form.last_name.errors }}</span>
                     </div>
                  </div>
                  <div class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1" class="required">First Name{% if employment_form.first_name.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.first_name }}
                        <span class="error">{{ employment_form.first_name.errors }}</span>
                     </div>
                  </div>
                  <div class="filter_col col-md-12">
                     <div class="form-group ">
                        <label for="exampleInputEmail1" class="required">Social Security Number{% if employment_form.social_security_number.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.social_security_number }}
                        <span class="error">{{ employment_form.social_security_number.errors }}</span>
                     </div>
                  </div>
               </div>
               <div class="fixed col-md-6">
                  <div class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1">Email Address{% if employment_form.employee_email.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.employee_email }}
                        <span class="error">{{ employment_form.employee_email.errors }}</span>
                     </div>
                  </div>
                  <div class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1">Mobile Number (+46XXXXXXXXX){% if employment_form.employee_mobile.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.employee_mobile }}
                        <span class="error">{{ employment_form.employee_mobile.errors }}</span>
                     </div>
                  </div>
                  <div class="filter_col col-md-12">
                     <div class="form-group">
                        <label for="exampleInputEmail1">Profile Image{% if employment_form.employee_picture.field.required %}<span class="error">*</span>{% endif %}</label>
                        {{ employment_form.employee_picture }}
                        <span class="error">{{ employment_form.employee_picture.errors }}</span>
                     </div>
                  </div>
                  <br>
               </div>
            </div>
         </div>
         <div class="row marl buttons_row text-center form_btn_row">
            <button class="btn btn-default save" type="submit">Save</button>
            <a href="{% url 'employee:employee_view_employment' employment.id %}" class="btn btn-default clear">CANCEL</a>
         </div>
      </div>
   </div>
   <br clear="all">
   <input type="hidden" id="save_new_form" name="savenewform">
</div>

为什么Bootstrap折叠类会按照屏幕快照中的说明更改div col的位置。我不希望职位在扩大后改变。请帮忙。